jQuery从选择器获取实际的data-id

时间:2013-10-25 18:35:24

标签: javascript jquery

我在网页上有一个带有数据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获得实际值。我不明白为什么我只有第一个选项的数据ID。这是我的代码http://jsfiddle.net/s55rR/ 请帮我找一个错误。

3 个答案:

答案 0 :(得分:6)

你可以$(this).find('option:selected').data('id')

答案 1 :(得分:4)

您选择了多个元素$(this).find('option'))但.data()仅在长度为&gt; 1的jQuery上调用时返回第一个元素的值:

  

描述: 返回指定数据存储中jQuery集合中第一个元素的值,由data(name, value)或HTML5 data-*属性设置

如果您只想要用户选择的data-id中的<option>值,那么您只需要选择该元素。

答案 2 :(得分:3)

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

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

fiddle