Javascript 获取选定下拉选项的数据属性

我正在尝试将选择框选项上的自定义数据属性发布到隐藏的表单字段

这是我的html：

<select id="sampleorder" multiple="multiple">
 <option value='xxx' data-amount='5'>Name</OPTION>
 <option value='xxx' data-amount='15'>Name</OPTION>
 <option value='xxx' data-amount='2'>Name</OPTION>
</select>

我猜我的变量“sampleAmount”应该是这样的

  var sampleAmount = options.val().data("amount");

但这并没有给我预期的结果。 获取每个项目的数据属性值的好方法是什么

谢谢

试试这个

HTML

将id属性添加到

选择下拉列表中

像

小提琴

试试这个：

$('#submit_btn').click(function() {
  var samplesSelected = $('#sampleorder').val(),
      sampleAmount = $('#sampleorder option:selected').data("amount");
  $('input[name=order]').val(samplesSelected);
  $('input[name=quantity]').val(sampleAmount);
});

---

我忘了提到它必须是一个多选框，对不起。 在您的帮助和对jQuery文档的简要了解下，我成功地解决了这个问题：

$("select#sampleorderm").change(function () {
    var samplesSelected = options.val().join("::");
    var samplesAmount = "";
        $("select#sampleorderm option:selected").each(function () {
            samplesAmount += $(this).data("amount") + " ";
        });

    $('input[name=sampleorder]').val(samplesSelected);
    $('input[name=sampleorderquantity]').val(samplesAmount);
 });

---

为什么要使用jQuery？只需使用

event.target.options[event.target.selectedIndex].dataset.amount

另一个答案：

var selectContainer = document.getElementById('sampleorder')
var selectedOption  = selectContainer.selectedOptions.item()
var amount          = selectedOption.getAttribute('data-amount')

---

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

var sampleAmount=this.selectedOptions[0].getAttribute（'data-amount'）

例如：

功能选择更改（事件）{
console.log（event.selectedOptions[0].getAttribute（'data-amount'）；
}

一
二
三

谢谢！在我找到一个不使用jquery的答案之前，我必须先回答4个不同的问题。很高兴我能帮上忙：）哈哈，我甚至不记得写过这个答案谢谢！找到了8个jQuery解决方案，只有这一个带有香草javascript。如果其他人在选择某个选项时正在寻找获取该选项的数据属性的方法，则需要使用以下内容设置变量：

var yourVariable=event.target.options[event.target.selectedIndex].dataset.your-data-attribute；}）。这通常会驻留在更改事件侦听器中。为什么要使用jQuery？因为我认为支持IE应该是
item（0）
$('#submit_btn').click(function() {
  var samplesSelected = $('#sampleorder').val(),
      sampleAmount = $('#sampleorder option:selected').data("amount");
  $('input[name=order]').val(samplesSelected);
  $('input[name=quantity]').val(sampleAmount);
});

$("select#sampleorderm").change(function () {
    var samplesSelected = options.val().join("::");
    var samplesAmount = "";
        $("select#sampleorderm option:selected").each(function () {
            samplesAmount += $(this).data("amount") + " ";
        });

    $('input[name=sampleorder]').val(samplesSelected);
    $('input[name=sampleorderquantity]').val(samplesAmount);
 });

var selectContainer = document.getElementById('sampleorder')
var selectedOption  = selectContainer.selectedOptions.item()
var amount          = selectedOption.getAttribute('data-amount')