使用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'); 
});