javascript 获取所选下拉选项的数据属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17039741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get data attribute for selected dropdown options
提问by Johan Cruijff
I'm trying to post a custom data attribute on a select box option to a hidden form field.
我正在尝试将选择框选项上的自定义数据属性发布到隐藏的表单字段。
Here's my html:
这是我的 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>
And jQuery
和 jQuery
$('#submit_btn').click(function() {
var options = $('select#sampleorder');
var samplesSelected = options.val();
$('input[name=order]').val(samplesSelected);
$('input[name=quantity]').val(sampleAmount);
});
I'm guessing that my variable "sampleAmount" should look somewhat like this
我猜我的变量“sampleAmount”应该看起来像这样
var sampleAmount = options.val().data("amount");
But it's not giving me the expected results. What would be a good approach to get the data attribute value per item?
但它没有给我预期的结果。获取每个项目的数据属性值的好方法是什么？
Thanks!
谢谢！
采纳答案by A. Wolff
Try this:
试试这个：
$('#submit_btn').click(function() {
var samplesSelected = $('#sampleorder').val(),
sampleAmount = $('#sampleorder option:selected').data("amount");
$('input[name=order]').val(samplesSelected);
$('input[name=quantity]').val(sampleAmount);
});
回答by zackify
why use jQuery? Just use event.target.options[event.target.selectedIndex].dataset.amount
为什么要使用 jQuery？只需使用event.target.options[event.target.selectedIndex].dataset.amount
回答by Rohan Kumar
Try this,
试试这个，
HTML
HTML
Add id attribute to your select drop downlike
将 id 属性添加到您的select drop down喜好
<select id="sampleorder" >
....
SCRIPT
脚本
var sampleAmount = $('select#sampleorder option:selected').data("amount");
回答by Yanga
In pure vanilla javascript you can use :
在纯香草 javascript 中，您可以使用：
var sampleAmount = this.selectedOptions[0].getAttribute('data-amount'));
var sampleAmount = this.selectedOptions[0].getAttribute('data-amount'));
Example:
例子：
function SelectChange(event) {
console.log(event.selectedOptions[0].getAttribute('data-amount'));
}<select onchange="SelectChange(this)">
<option data-amount="1">one</option>
<option data-amount="2">two</option>
<option data-amount="3">three</option>
</select>回答by BHOLT
Another vanilla JS answer:
另一个香草 JS 答案：
var selectContainer = document.getElementById('sampleorder')
var selectedOption = selectContainer.selectedOptions.item()
var amount = selectedOption.getAttribute('data-amount')
回答by Johan Cruijff
I forgot to mention it has to be a multi select box, sorry. With your help and a brief look into the jQuery documentation I've managed to solve it:
我忘了提到它必须是一个多选框，抱歉。在您的帮助和对 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);
});
