jQuery 从 select2 选择的选项中获取属性值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19155264/
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 attributes values from select2 selected option
提问by Leon van der Veen
I'm using the Select2 plugin from http://ivaynberg.github.io/select2/select2-latest.htmlwhat works fine but i'm having a problem to get the values from the options attributes.
我正在使用来自http://ivaynberg.github.io/select2/select2-latest.html的 Select2 插件，它工作正常，但我在从选项属性中获取值时遇到问题。
I've got a select menu like this:
我有一个这样的选择菜单：
<select name="invoice_line[0][vat]" class="vat">
<option value="20440" data-value="21.00" data-name="20440" selected="selected">21%</option>
<option value="20441" data-value="6.00" data-name="20441">6%</option>
<option value="20442" data-value="0.00" data-name="20442">0%</option>
</select>
How can I get the values of the attributes 'data-value', 'data-name' and 'value' of the selected option?
如何获取所选选项的属性“数据值”、“数据名称”和“值”的值？
回答by utkarsh
obj = $("#dropdown").select2("data")
in objvariable i will get all the dataof the selected node.
在obj变量中，我将获得所有data的selected node.
回答by pymarco
This was answered in another SO question
There is no direct method with select2, you can use a combinaison of select2 data and jQuery :
$("#example").select2().find(":selected").data("id");
First you get the select2 data then you find your selected option with jQuery and finally the data-attribute.
select2 没有直接的方法，您可以使用 select2 数据和 jQuery 的组合：
$("#example").select2().find(":selected").data("id");
首先你得到 select2 数据，然后你用 jQuery 找到你选择的选项，最后是数据属性。
回答by Shamsudheen
We can use a combination of select2 data and jQuery :
我们可以使用 select2 数据和 jQuery 的组合：
$("#example").select2('data').element[0].attributes['data-name'].value
回答by Kunal
Following worked for me. Idea is to use "change" function as follows
以下为我工作。想法是使用“更改”功能如下
<select class="drop-down">
<option value="0">A</option>
<option value="1">B</option>
</select>
$('.drop-down').select2().on("change", function(e) {
var obj = $(".drop-down").select2("data");
console.log("change val=" + obj[0].id); // 0 or 1 on change
});
回答by patriciabravos
You can access to attributes looking in DOM structure:
您可以访问在 DOM 结构中查找的属性：
<select id="select_name">
<option value="20440" data-value="21.00">21%</option>
<option value="20441" data-value="6.00">6%</option>
<option value="20442" data-value="0.00">0%</option>
</select>
$('#select_name option').each(function (index) {
console.log($(this).attr("data-value"));
});
回答by mohammad.sn
set an id for your select element and this would work
为您的选择元素设置一个 id，这将起作用
$('select#your-id').find('option[value="'+$('#your-id').val()+'"]').attr('data-attribute');
回答by Vishal Kumar
el = document.getElementsByName("invoice_line[0][vat]")
el.options[[el.selectedIndex]].attributes["data-id"].value
回答by Selvamani
I hope you solved the issue. Here we dont use select2(), if we use select2()it will not work all other functions like formatNoMatches, on-change....
我希望你解决了这个问题。这里我们不使用select2()，如果我们使用select2()它，将无法使用所有其他功能，例如formatNoMatches, on-change....
$("#example").find(":selected").data("id");
回答by brianrhea
The params.data.elementobject of the selected item holds the data you're looking for.
params.data.element所选项目的对象包含您要查找的数据。
Where .foois the select element I'm calling, and the data attribute within the options I want to access is data-bar="some value"The following works for me:
.foo我正在调用的 select 元素在哪里，我想要访问的选项中的 data 属性是data-bar="some value"以下对我有用的：
var $fooSelect = $('.foo');
$fooSelect.on(function (e) {
console.log($(e.params.data.element).data('bar'));
});
回答by Jamie Hutber
No idea about the pluggin, and without checking if the code works i imagine it would be something like this:
不知道插件，如果不检查代码是否有效，我想它会是这样的：
$('.vat li').each(function(){
var me = $(this),
mevalue = me.attr('value'),
datavalue = me.data('value'),
dataname = me.data('name');
//do what you want with the data?
});
