使用jQuery更改元素文本和数据值?

时间:2014-06-11 07:04:50

标签: javascript jquery html css

我正在构建一个下拉菜单,我想在点击时从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>元素的样式。

4 个答案:

答案 0 :(得分:7)

使用.text()

的制定者版本
$("ul#subjects > li").on("click", function () {
    $("#subjects").slideUp(210);
    $("#subject").text($(this).text());
});

演示:Fiddle

答案 1 :(得分: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);
            });

DEMO

答案 2 :(得分:1)

试试这个:

$("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

答案 3 :(得分:1)

试试这个,这也会更新数据值

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