jQuery get actual data-id from selector

Question

I have a selector on webpage with data-id and value

HTML

    <select id="s1">
        <option data-id="01">aaaa1</option>
        <option data-id="23">bbb1</option>
        <option data-id="451">ccc1</option>
        <option data-id="56">ddd1</option>

    </select>

<p></p>

JAVASCRIPT

$('#s1').change(function() { 
       var val = $(this).val();   
       var val_id =$(this).find('option').data('id');
       $("p").html("value = " + val + "<br>" +"value-data-id = "+  val_id);
});

I wanna have actual value from selected selector and his data-id. I do not understand why I have data-id from only first option. This is my code http://jsfiddle.net/s55rR/ Please help me to find a bug.

Answer 1

您可以执行$(this).find('option:selected').data('id') 。

Answer 2

You've selected multiple elements ( $(this).find('option') ) but .data() only returns the value from the first element if called on a jQuery with length >1:

Description: Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.

If you only want the data-id value from the user-selected <option> , then you need to select only that element.

Answer 3

Because you selecting all options, and jQuery returning .data('id') of first one

var val_id =$(this).find('option:selected').data('id');

fiddle