javascript - 根据选项“标签”属性替换 HTML 中的值

Question

我需要根据下拉列表中选择的内容替换页面上的值。更具体地说，我需要填写“标签”值。这是HTML：

<select class="item-number">
  <option>Please select</option>
  <option value="123" label="Description about 123">123</option>
  <option value="456" label="Description about 456">456</option>
</select>

<span class="item-name">Description shows up here</span>

现在，如果有人选择选项 123，我需要将其中的文本span替换为“关于 123 的描述”。有没有办法做到这一点？我是一个 JS/Jquery 新手，在这里完全超出了我的理解范围。;)

Answer 1

$('.item-number').change(function () {
    var lbl = $(this.options[this.selectedIndex]).attr('label');
    $('.item-name').html(lbl);
});

这是小提琴

Answer 2

尝试这个

$(document).on('change','select.item-number', function() {
    $('.item-name').text($(this).find(':selected').attr('label'));
});

演示

Answer 3

直接来自jQuery 文档

$("select").change(function () {
    var str = "";
    $(".item-number option:selected").each(function (i) {
        if ($(this).attr('label')) 
            str = $(this).attr('label');
        else 
            str = "Description shows up here ";
    });
    $(".item-name").text(str);
}).trigger('change');

工作小提琴

对上述内容进行一些更改以使其更好地工作:)

更新 1（根据 OP 的要求）：

$('select').on('change',function(){
   label= $(this).find(':selected').val();
   $('.item-name').text(label);
});

工作小提琴

更新 2：

$("select").change(function () {
    var str = "";
    str = $(".item-number option:selected").val();
    if (str == "Please select") {
        $(".no-add").show();
        $(".add").hide();
    } else {
        $(".no-add").hide();
        $(".add").show();
    }
    $(".item-name").text(str);
}).trigger("change");

工作小提琴

Answer 4

就这么简单：

$("select.item-number").on("change", function() {
    $(".item-name").text($(this).find(":selected").attr("label"));
});

小提琴：http: //jsfiddle.net/9YLZF/

干杯!