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

I'm trying to select the data attribute from the selected option of a drop-down list then place it within a textbox. This is also my second data attribute. I'm going to add code for whenever the user changes the option (code I already have written and can abstract here), but I want to get this part to work first.

我正在尝试从下拉列表的选定选项中选择数据属性,然后将其放在文本框中。这也是我的第二个数据属性。我将在用户更改选项时添加代码(代码我已经编写并可以在这里抽象),但我希望首先使用此部分。

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

5 个解决方案

#1

You can use data() method in jQuery , Also add a change event for dropdown

您可以在jQuery中使用data()方法,还可以为下拉列表添加更改事件

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

FIDDLE

You need to wrap code within $(document).ready(function() {...}); , to bind event after dom element is loaded.

你需要在$(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

A data attribute isn't an input, and you don't need to call .val() on it.

数据属性不是输入,您不需要在其上调用.val()。

The following will work just fine:

以下工作正常:

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

#4

You can get data using .data() function as follows:

您可以使用.data()函数获取数据,如下所示:

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

#5

In pure vanilla javascript you can use :

在纯香草javascript中你可以使用:

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

Example:

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

#1