select data attribute of option using 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.

littlealien · Accepted Answer · 2014-12-04 10:12:53Z

2

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.

answered Dec 4, 2014 at 10:12

littlealien

4294 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

roryok · Accepted Answer · 2014-12-04 10:09:51Z

0

this will give you the data attribute

$(this).data("id")

answered Dec 4, 2014 at 10:09

roryok

9,64519 gold badges81 silver badges139 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-12-04 10:12:35Z

0

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

answered Dec 4, 2014 at 10:12

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Nishant Nawarkhede · Accepted Answer · 2014-12-04 10:18:15Z

0

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

edited Dec 4, 2014 at 10:18

answered Dec 4, 2014 at 10:12

Nishant Nawarkhede

8,40813 gold badges61 silver badges83 bronze badges

Collectives™ on Stack Overflow

select data attribute of option using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related