Javascript 根据选项“替换HTML中的值”；标签"；属性

我需要根据下拉列表中选择的内容替换页面上的值。更具体地说，我需要填写“label”值。以下是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
456
描述显示在这里

现在，如果有人选择了选项123，我需要将

span

中的文本替换为“Description about 123”。有没有办法做到这一点？我是一个JS/Jquery新手，完全不了解这里的情况

就这么简单：

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

小提琴：

干杯

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

这是直接从

对上述内容进行一些更改，使其工作得更好：）

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

更新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");

试试这个

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

---

非常感谢，这也很有效！如果我决定不使用标签，而是使用标准选项值，我将如何更改代码？另外，我想隐藏/显示一个按钮，允许用户将他们的选择添加到购物车。我在这里添加了一些HTML。请你给我指出正确的方向好吗？谢谢！：）太好了，谢谢！你能帮我搞定“添加到购物车”按钮吗？我在这里试过这个，但它还没有100%起作用：非常感谢@凯布拉克，看看这个。您可以对其进行修改以使其更好：）。

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

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