使用jquery选择选项的数据属性

Question

我正在使用jQuery插件select2.js。我如何选择使用jQuery选定选项的数据属性。

这里是代码

<select class="select2"> 
    <option data-id="1" value="2"> CASE 1 </option> 
    <option data-id="2" value="2"> CASE 1 </option> 
    <option data-id="3" value="2"> CASE 1 </option> 
</select> 

$(document).ready(function(){ 

    $('.select2').select2(); 

    $('.select2').click(function(){ 
     //alert($(this).val()); 

    }); 
}); 

我如何使用jQuery获得所选选项的data-id。

Answer 1

这与选择元素具有相同的逻辑。 您可以使用默认选择器。

$('.select2').change(function(){ 
    alert($(this).find('option:selected').data('id')) 
}); 

但我建议您使用更改事件，而不是点击选择框。

Answer 2

这会给你的数据属性

$(this).data("id") 

Answer 3

你可以做到这一点的变化情况，这是fiddle

$(function() { 
    $(".select2").change(function(){ 
     var element = $(this).find('option:selected'); 
     var id= element.attr("data-id"); 
     alert(id); 
    }); 
}); 

Answer 4

可以使用:selected选择找到选择的选项，然后使用.data()获得/设置数据属性值。您还应该使用更改事件而不是单击事件来选择元素：

$('.select2').change(function(){ 
    var selecteddataid = $(this).find('option:selected').data('id'); 
});