data attribute in jquery

Question

Here it's my html code

<select class="data">
    <option value="This is my test code" data-id='123'/>
</select>

Now I want to access a data attribute in jquery here it's my jquery code

$( ".data" ).change(function() {
    var Id = $(this).data("id")
    alert("id:  "+Id);
});

but when I'm tried this one it's give a undefine value. please help me.

I'm Geeker · Accepted Answer · 2015-03-03 11:57:14Z

3

Use this

$( ".data" ).change(function() {
    var Id =  $(this).find('option:selected').data("id")
    alert("id:  "+Id);
});

answered Mar 3, 2015 at 11:57

I'm Geeker

4,6575 gold badges24 silver badges42 bronze badges

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

Comments

Satpal · Accepted Answer · 2015-03-03 12:00:52Z

0

Your select element doesn't have data attributes. You need to find the child option of select then you can use .data()

Use

var Id = $(this).find('option').data("id");
//For selected option
//var Id = $(this).find('option:selected').data("id");

this refers to element which invoked the handler, in current scenario it will be select

answered Mar 3, 2015 at 11:55

Satpal

133k13 gold badges168 silver badges171 bronze badges

Mateusz Mania · Accepted Answer · 2015-03-03 13:04:24Z

0

Try this.

$(document).on('change', '.data', function (){

    var id = $(this).find('[value="'+$(this).val()+'"]').data('id');
    alert(id);
});

answered Mar 3, 2015 at 13:04

Mateusz Mania

8494 silver badges15 bronze badges