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

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 />

JQuery的

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

的jsfiddle

Answer 1

您可以data()在jQuery中使用方法,也可以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元素后绑定事件.