从所选下拉列表的数据属性中获取值

Question

我试图从下拉列表的选定选项中选择数据属性，然后将其放在文本框中。这也是我的第二个数据属性。我将在用户更改选项时添加代码（我已经编写了代码，可以在此处抽象），但我想先让这部分工作。

HTML

 <select class="operations-supplier" name="operations-supplier">
    <option data-selected="latam" data-capacity="100000" value="
        10">LATAM - Supplier A</option>
    <option data-selected="na" data-capacity="200000" value="20>">NA - Supplier B</option>
    <option data-selected="asia" data-capacity="300000" value="30">ASIA - Supplier C</option>
</select>
<input type="text" class="operations-supplierCapacity" readonly />

查询

var capacityValue = $('select.operations-supplier').find(':selected').attr('data-capacity').val();
$('.operations-supplierCapacity').val(capacityValue);

小提琴

原文由 dvoutt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 jQuery 中使用 data() 方法，同时为下拉列表添加 change 事件

$(document).ready(function() {
    $('select.operations-supplier').change(function() {
        var capacityValue = $('select.operations-supplier').find(':selected').data('capacity');
        $('.operations-supplierCapacity').val(capacityValue);
    });
});

小提琴

您需要将代码包装在 $(document).ready(function() {...}); 中，以便在加载 dom 元素后绑定事件。

原文由 Pranav C Balan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在纯香草 javascript 中，您可以使用：

    var supplierCapacity = this.selectedOptions[0].getAttribute('data-capacity'));

例子：

 function OnSelectChange(event) {
    document.getElementById('supplierCapacity').value = event.selectedOptions[0].getAttribute('data-capacity');
}

 <select onchange="OnSelectChange(this)" class="operations-supplier" name="operations-supplier">
<option data-selected="latam" data-capacity="100000" value="10">LATAM - Supplier A</option>
<option data-selected="na" data-capacity="200000" value="20>">NA - Supplier B</option>
<option data-selected="asia" data-capacity="300000" value="30">ASIA - Supplier C</option>
</select>
<input id="supplierCapacity" type="text" class="operations-supplierCapacity" readonly />

原文由 Yanga 发布，翻译遵循 CC BY-SA 4.0 许可协议