Html 使用 <select> 在 select2 中获取自定义数据属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22261209/
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 custom data-attribute in select2 with <select>
提问by Kalzem
Let's assume you have the following HTML5
假设您有以下 HTML5
<select id="example">
<option value="AA" data-id="143">AA</option>
<option value="BB" data-id="344">BB</option>
</select>
$("#example").select2();
How do I get the data-id from the selected option ?
如何从所选选项中获取数据 ID？
回答by Kalzem
There is no direct method with select2, you can use a combinaison of select2 data and jQuery :
select2 没有直接的方法，您可以使用 select2 数据和 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 数据，然后你用 jQuery 找到你选择的选项，最后是数据属性。
回答by Paul
Select2 v4 relies on <select>tags instead of hidden <input>tags so it's now easier to get the selected option or options: you just refer to the original <select>. This may have also been the case with Select2 v3 but I've only used Select2 v4.
Select2 v4 依赖于<select>标签而不是隐藏<input>标签，因此现在可以更轻松地获取选定的一个或多个选项：您只需参考原始<select>. Select2 v3 可能也是这种情况，但我只使用了 Select2 v4。
$('#example option:selected').attr('data-id')
See also Get selected value in dropdown list using JavaScript?
另请参阅使用 JavaScript 在下拉列表中获取选定值？
Edit:I like this answerfor general purpose data object access:
var d = $("#dropdown").select2("data");
dwill be an array containing the selected item(s) as objects, so to access the idproperty of the first item:
d将是一个包含所选项目作为对象的数组，因此要访问id第一个项目的属性：
var id = d[0].id;
回答by Wagner Langer
$(document).ready(function() {
$('select#myselect').select2({
templateResult: formatOutput
});
});
function formatOutput (item) {
var $state = $(item.element).data('id') + ' ' + item.text;
return $state;
};
回答by Loreto Gabawa Jr.
After hours of trying to solve this, I have manage to pull out the attribute. I am using 3.5.4
经过数小时的尝试解决此问题后，我设法提取了该属性。我正在使用 3.5.4
$("#select2").select2('data').element[0].attributes[1].nodeValue
HTML
HTML
<select id="select2" name="course" class="form-control">
<option></option>
<optgroup label="Alabama">
<option value="City 1" data-url="/alabama/city-1">City 1</option>
<option value="City 2" data-url="/alabama/city-2">City 2</option>
</optgroup>
</select>$("#select2").select2('data').element[0].attributes[0].nodeValue --> Value Attribute
$("#select2").select2('data').element[0].attributes[1].nodeValue --> Data-URl Attribute回答by MrSo
My contribution on how to get value of data-attibute of selected option using Select2 event (3.5) (thx to @loreto g's answer):
我对如何使用 Select2 事件 (3.5) 获取所选选项的数据属性值的贡献（感谢@loreto g 的回答）：
<select id="myselect">
<option value="foo" data-type="bar" data-options='baz'></option>
</select>
<script>
var myselect = $('#myselect').select2();
myselect.on('select2-selecting', function(sel){
var seltype = sel.choice.element[0].attributes['data-type'].value,
seloptions = sel.choice.element[0].attributes['data-options'].value;
});
</script>
Hope this helps
希望这可以帮助
回答by Abhinav bhardwaj
we can simply do this like:
我们可以简单地这样做：
$(this).find(":selected").data("id")
回答by hassan
so simple, using jquery api [tested against select2 4.x version]
如此简单，使用jquery api [针对select2 4.x 版本进行测试]
$('#select').on('select2:select', function (e) {
let id = $(e.params.data.element).data('id');
});
回答by Brian Duncan
I use select2 to load all of my options dynamically (from an array), and this is what I have been able to use successfully:
我使用 select2 动态加载我的所有选项（从数组），这是我能够成功使用的：
$('#element').select2('data')[0].dataAttribute;
where the id of the select is 'element', and dataAttribute is the custom attribute for the option i'm trying to retrieve.
其中选择的 id 是“元素”，而 dataAttribute 是我试图检索的选项的自定义属性。
