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

Question

假设您有以下 HTML5

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

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

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

原文由 Kalzem 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Kalzem 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

jsfiddle演示

另请参阅 使用 JavaScript 在下拉列表中获取选定值？

编辑： 我喜欢 这个通用数据对象访问的答案：

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

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

 var id = d[0].id;

原文由 Paul 发布，翻译遵循 CC BY-SA 3.0 许可协议