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');

小提琴