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

我正在尝试从下拉列表的选定选项中选择数据属性，然后将其放在文本框中。这也是我的第二个数据属性。我将在用户更改选项时添加代码（我已经编写了代码，可以在这里进行抽象），但我想先让这部分开始工作

HTML

您可以在jQuery中使用方法，还可以为下拉菜单添加事件

$(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元素后绑定事件。
您可以使用以下函数获取数据：

数据属性不是输入，您不需要对其调用
.val（）

以下方法可以很好地工作：

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


在纯香草javascript中，您可以使用：

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

例如：


功能选择更改（事件）{
document.getElementById（'supplierCapacity'）。value=event.selectedOptions[0]。getAttribute（'data-capacity'）；
}

LATAM-供应商A
NA-供应商B
亚洲-供应商C
var capacityValue=$（这个）。查找（':selected'）。数据（'capacity'）谢谢，感谢为更改提供的附加代码。唯一需要添加的是$（'select.operations supplier'）.trigger（'change'）；在“}”的第一个结束括号之后
$('select.operations-supplier').on('change', function() {
    var capacityValue = $('select.operations-supplier').find(':selected').data('capacity');
    $('.operations-supplierCapacity').val(capacityValue);
});

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

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

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