使用 <select> 在 select2 中获取自定义数据属性

Posted 2023-05-07

【中文标题】使用 <select> 在 select2 中获取自定义数据属性

【英文标题】：Get custom data-attribute in select2 with <select>

【发布时间】：2014-04-11 06:09:34

【问题描述】：

假设您有以下 html5

<select id="example">
    <option value="AA" data-id="143">AA</option>
    <option value="BB" data-id="344">BB</option>
</select>

$("#example").select2();

如何从所选选项中获取数据 ID？

【参考方案1】：

select2 没有直接的方法，你可以使用 select2 数据和 jQuery 的组合，如下所示：

$("#example").select2().find(":selected").data("id");

首先您获得 select2 数据，然后您使用 jQuery 找到您选择的选项，最后是数据属性。

【讨论】：

其实我会说 $("#example").find(":selected").data("id");

@UgoRobain 您的解决方案在前一个解决方案在相同情况下不起作用的情况下完美运行。在我的情况下，我有 formatResult 和 formatSelection ，只有你的帮助，谢谢

这似乎不适用于带有 IE Edge 的 select2 3.5（撰写本文时 - 2019 年 1 月）

$("#example").select2().find(":selected").data("id"); 这将运行重新初始化。最好使用@UgoRobain 方法

在我的情况下，使用此解决方案后，它再次点击下拉菜单，并且由于此下拉菜单自定义 UI 中断..否则这将正常工作。谢谢

【参考方案2】：

Select2 v4 依赖于<select> 标签而不是隐藏的<input> 标签，因此现在更容易获得选定的选项：您只需参考原始<select>。 Select2 v3 可能也是这种情况，但我只使用过 Select2 v4。

$('#example option:selected').attr('data-id')

jsfiddle demonstration

另见Get selected value in dropdown list using javascript?

编辑：我喜欢 this answer 用于通用数据对象访问：

var d = $("#dropdown").select2("data");

d 将是一个包含所选项目作为对象的数组，因此要访问第一项的 id 属性：

var id = d[0].id;

【讨论】：

无论出于何种原因，这是唯一对我有用的方法：$('#example option:selected').attr('data-id')

这对我有用，谢谢..$('#example option:selected').data("attrName")

【参考方案3】：

$(document).ready(function() 
    $('select#myselect').select2(
        templateResult: formatOutput
    );

);
function formatOutput (item) 
    var $state = $(item.element).data('id') + ' ' + item.text;
    return $state;
;

【讨论】：

您能解释一下为什么您的答案有效吗？仅仅发布代码通常没有那么有用

它在插件文档中。您可以使用接收“item”作为参数的函数格式化模板结果，并使用“item.element”返回元素本身，因此您可以从中获取任何属性。

【参考方案4】：

经过几个小时的尝试解决这个问题，我设法提取了该属性。我正在使用 3.5.4

$("#select2").select2('data').element[0].attributes[1].nodeValue

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

【讨论】：

对此要谨慎，因为如果您更改或添加更多属性，您将破坏它

谢谢，这是 4.x 的正确解决方案。关键是 ('data') 部分。就我而言，它是：$(<selector>).select2('data')[0]...

【参考方案5】：

如此简单，使用 jquery api [针对 select2 4.x 版本测试]

$('#select').on('select2:select', function (e) 
    let id = $(e.params.data.element).data('id');
);

【讨论】：

使用select2:select事件时最简单优雅的解决方案

如果您使用多个选项，则正确答案

【参考方案6】：

我们可以简单地这样做：

$(this).find(":selected").data("id")

【参考方案7】：

我对如何使用 Select2 事件 (3.5) 获取所选选项的数据属性值的贡献（感谢 @loreto g's answer）：

<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>

希望对你有帮助

【参考方案8】：

我使用 select2 动态加载我的所有选项（从一个数组），这是我能够成功使用的：

$('#element').select2('data')[0].dataAttribute;

其中选择的 id 是“元素”，dataAttribute 是我要检索的选项的自定义属性。

【参考方案9】：

Ad Per @Kalzem Example 效果很好但是你必须像 data-attributeName 这样提及你的属性。您必须首先提及data，然后提及您的attributes 名称。例子：<option value="AA" data-attributeName="143">AA</option>，你会得到$("#example").select2().find(":selected").data("attributeName");的数据