從所選下拉列表的數據屬性中獲取值

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

可以在jQuery的使用data()方法，而且增加一個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元素加載後綁定事件。

Answer 2

可以使用.data()功能follows獲取數據：

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

Answer 3

數據屬性不是輸入，並且你不需要調用.val()就可以了。

下面將工作得很好：

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

Answer 4

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')) 
})