Cannot get value of data attribute using jQuery

Question

Here it is my html code

<select class="changeOption"> {% for dBoy in dBoyList %} <option value="{{dBoy.id}}" data-locid='{{dboy.location.id}}' {% endfor %} </select> 

When I select any option from the drop-down list, it shows undefine

JQuery code

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

Answer 1

this refers to the context of the selected item. you need to find the selected option in it, and then get the attribute:

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