Change element text and data-value using jQuery?

Question

I'm building a dropdown menu, and I want to select any of the lis from the parent element of ul when clicked. Then, take that text and change the "Work Inquiry" (text of #subject) text w/ selected menu item text.

I have comments explaining my predicament on the fiddle.

Here is the jsFiddle :: http://jsfiddle.net/8m4Tj/

$("ul#subjects > li").on("click", function () {
  $("#subjects").slideUp(210);
  var liText = $(this).text();
  var newSubjectText = $("#subject").text();
  alert(liText); // this alerts selected item... how do you change #subject.text ???
  alert(newSubjectText); // stays the same
});

I don't know if im selecting the wrong item, but I want to replace the data-value and the actual text value. I'm doing this method since there are no easy ways of styling the <select> element.

$("#subject").text(liText);

greenhatman
– greenhatman

2014-06-11 07:09:02 +00:00
Commented Jun 11, 2014 at 7:09 — greenhatman
– greenhatman, Commented Jun 11, 2014 at 7:09

Arun P Johny · Accepted Answer · 2014-06-11 07:08:28Z

7

Use the setter version of .text()

$("ul#subjects > li").on("click", function () {
    $("#subjects").slideUp(210);
    $("#subject").text($(this).text());
});

Demo: Fiddle

answered Jun 11, 2014 at 7:08

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sridhar R · Accepted Answer · 2014-06-11 07:09:22Z

2

Use .text() to set the text to span element

Try this

$("ul#subjects > li").on("click", function () {
                $("#subjects").slideUp(210);
                var liText = $(this).text();
                $("#subject").text(liText); // this line set the text
                alert(liText);
            });

DEMO

answered Jun 11, 2014 at 7:09

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Comments

Anil kumar · Accepted Answer · 2014-06-11 07:11:30Z

1

Try this, this will update data value also

$("ul#subjects > li").on("click", function () {
    $("#subjects").slideUp(210);
    $("#subject").text($(this).text()).prop('data-value' $(this).text());
});

answered Jun 11, 2014 at 7:11

Anil kumar

4,1774 gold badges25 silver badges37 bronze badges

Comments

Ishan Jain · Accepted Answer · 2014-06-11 07:16:56Z

1

Try this:

$("ul#subjects > li").on("click", function () {
    $("#subjects").slideUp(210);
    var liText = $(this).text();
    $("#subject").text(liText);
    var newSubjectText = $("#subject").text();
    alert(liText);
    alert(newSubjectText); 
});

Working Fiddle

edited Jun 11, 2014 at 7:16

answered Jun 11, 2014 at 7:11

Ishan Jain

8,22111 gold badges52 silver badges77 bronze badges

Collectives™ on Stack Overflow

Change element text and data-value using jQuery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related