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 / Please help me to find a bug.

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/s55rR/ Please help me to find a bug.

• javascript
• jquery

• did you try with a more conservative .attr("data-id")? – leonard vertighel Commented Oct 25, 2013 at 18:38

3 Answers 3

You can do $(this).find('option:selected').data('id').

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.

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

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

fiddle