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

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

Answer 3

在纯香草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 />

Answer 4

您可以使用.data()函数follows获取数据：

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

Answer 5

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

以下内容可以正常使用：

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

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

5 个答案: