jQuery从选择器获取实际的数据ID

Question

我在网页上有一个带有数据ID和值的选择器

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

我想从选定的选择器及其数据ID中获取实际值。 我不明白为什么我只有第一个选项具有data-id。 这是我的代码http://jsfiddle.net/s55rR/请帮助我查找错误。

Answer 1

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

Answer 2

您已经选择了多个元素 （ $(this).find('option') ），但是.data()仅在长度大于1的jQuery上调用时才返回第一个元素的值：

说明： 返回在命名数据存储中jQuery集合中第一个元素的值，该值由data(name, value)或HTML5 data-*属性设置。

如果只需要用户选择的<option>的data-id值，则只需选择该元素。

Answer 3

因为选择所有选项，并且jQuery返回第一个选项的.data('id')

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

小提琴