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？

Answer 1

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

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

首先获取select2数据，然后使用jQuery找到所选的选项，最后找到数据属性。

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

Answer 3

str.charAt(index)

Answer 4

我对如何使用Select2事件（3.5）（thx到@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>

希望这有帮助

Answer 5

我们可以这样做：

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

Answer 6

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

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

Answer 7

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

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

其中选择的id为“ element”，而dataAttribute是我尝试检索的选项的自定义属性。

Answer 8

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

获取数据

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

8 个答案: