Получить значение из атрибута данных выбранного раскрывающегося списка

Я пытаюсь выбрать атрибут данных из выбранного варианта раскрывающегося списка, а затем поместить его в текстовое поле. Это также мой второй атрибут данных. Я собираюсь добавить код для всякий раз, когда пользователь меняет параметр (код, который я уже написал и может абстрагироваться здесь), но я хочу, чтобы эта часть работала первой.

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

Ответ 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);
    });
});

FIDDLE

Вам нужно заключить код в $(document).ready(function() {...});, чтобы связать событие после загрузки элемента dom.

Ответ 2

http://jsfiddle.net/X4JvA/1/

$('.operations-supplier').change(function(){
   $('.operations-supplierCapacity').val($('.operations-supplier option:selected').attr('data-capacity'))
   //alert($('.operations-supplier option:selected').attr('data-selected'))
})

Ответ 3

Вы можете получить данные, используя . data() как следует:

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

Ответ 4

Атрибут данных не является входом, и вам не нужно вызывать .val() на нем.

Следующее будет работать отлично:

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