使用jQuery更改元素文本和數據值？

Question

我正在構建一個下拉菜單，單擊時希望從ul的父元素中選擇任何lis。 然后，獲取該文本並更改帶有選定菜單項文本的“工作查詢”（#subject文本）文本。

我的評論在小提琴上解釋了我的困境。

這是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
});  

我不知道即時通訊是否選擇了錯誤的項目，但我想替換數據值和實際文本值。 我正在執行此方法，因為沒有簡單的方式來設置<select>元素的樣式。

Answer 1

使用.text（）的setter版本

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

演示： 小提琴

Answer 2

使用.text()將文本設置為span元素

嘗試這個

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

演示

Answer 3

嘗試這個：

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

工作小提琴

Answer 4

試試這個，這也會更新數據值

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