使用<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？

Answer 1

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

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

首先获取select2数据,然后使用jQuery找到所选的选项,最后找到data-attribute.

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;

Answer 3

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

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

Answer 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

Answer 5

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

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