[英]Get custom data-attribute in select2 with <select>
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?
There is no direct method with select2, you can use a combination of select2 data and jQuery like following : 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 找到你选择的选项,最后是数据属性。
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>
. Select2 v4 依赖于
<select>
标签而不是隐藏的<input>
标签,因此现在更容易获得选定的一个或多个选项:您只需引用原始的<select>
。 This may have also been the case with Select2 v3 but I've only used Select2 v4. Select2 v3 可能也是这种情况,但我只使用了 Select2 v4。
$('#example option:selected').attr('data-id')
jsfiddle demonstration jsfiddle 演示
See also Get selected value in dropdown list using JavaScript?另请参阅使用 JavaScript 在下拉列表中获取选定值?
Edit: I like this answer for general purpose data object access:编辑:我喜欢这个通用数据对象访问的答案:
var d = $("#dropdown").select2("data");
d
will be an array containing the selected item(s) as objects, so to access the id
property of the first item: d
将是一个包含所选项目作为对象的数组,因此要访问第一个项目的id
属性:
var id = d[0].id;
$(document).ready(function() {
$('select#myselect').select2({
templateResult: formatOutput
});
});
function formatOutput (item) {
var $state = $(item.element).data('id') + ' ' + item.text;
return $state;
};
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
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');
});
我们可以简单地这样做:
$(this).find(":selected").data("id")
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希望这可以帮助
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 是我试图检索的选项的自定义属性。
Ad Per @Kalzem Example that works perfectly fine But you have to mention your attribute like this data-attributeName
. Ad Per @Kalzem Example 效果很好但是你必须提到你的属性,比如这个
data-attributeName
。 You must mention data
at first then mention your attributes
name .您必须首先提及
data
,然后提及您的attributes
name 。 Example : <option value="AA" data-attributeName="143">AA</option>
and you will get the data with $("#example").select2().find(":selected").data("attributeName");
示例:
<option value="AA" data-attributeName="143">AA</option>
,您将使用$("#example").select2().find(":selected").data("attributeName");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.