Получить пользовательские данные-атрибут в select2 с

предположим, у вас есть следующий HTML5

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

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

Как получить идентификатор данных из выбранного параметра ?

12
custom-data-attribute html5 jquery-select2

6 ответов

нет прямого метода с select2, вы можете использовать комбинацию данных select2 и jQuery:

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

сначала вы получаете данные select2, затем вы находите выбранную опцию с помощью jQuery и, наконец, Data-attribute.

18

Select2 v4 полагается на <select> теги вместо скрытых <input> теги, так что теперь легче получить выбранный вариант или параметры: вы просто обратитесь к оригиналу <select>. Возможно, это также было в случае с Select2 v3, но я использовал только Select2 v4.

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

демонстрация jsfiddle

см. также получить выбранное значение в раскрывающемся списке с помощью JavaScript?

Edit: мне нравится этот ответ для доступа к объекту данных общего назначения:

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

d будет массив, содержащий выбранный элемент(ы) в качестве объектов, поэтому для доступа к id свойство первого элемента:

var id = d[0].id;
10

после нескольких часов попыток решить эту проблему мне удалось вытащить атрибут. Я использую 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
6
$(document).ready(function() {
    $('select#myselect').select2({
        templateResult: formatOutput
    });

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

мы можем просто сделать это так: 

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

мой вклад в то, как получить значение data-attibute выбранной опции с помощью события Select2 (3.5) (thx to @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>

надеюсь, что это помогает

1