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

Question

I am using a jQuery Plugin select2.js . how can i select data attribute of selected option using jQuery.

here is the code

<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());

   });
});

How i can get data-id of selected option using jQuery.

Answer 1

This has the same logic as select element. You can use default selectors.

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

But i recommend you to use change event instead of click on select boxes.

Answer 2

这将为您提供数据属性

$(this).data("id") 

Answer 3

You can do it on change event, Here is fiddle

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

Answer 4

You can find selected option using :selected selector and then use .data() to get/set data attribute value. you should also use change event instead of click event for select element:

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