jQuery數據元素總是未定義的，爲什麼

Question

我已經看過很多帖子，但看不到我所做的與其他地方的建議不同。

我有以下幾點：

<select class="SS2" name="nSS"> 
    <option class="SSO" data-section="1" selected="selected" disabled="disabled">Select an Option</option> 
    <option class="SSO" data-section="1" value="1">option 1</option> 
    <option class="SSO" data-section="1" value="2">option 2</option> 
</select> 
</br> 

然後我有以下的jQuery：

<script> 
$(document).ready(function() { 
    $('body').on('change', '.SS2', function() { 
     var id1 = $(this).data('section'); 
     var id2 = $(this).val(); 
     alert(id1); 
     alert(id2); 
    }) 
}); 
</script> 

當它運行alert(id1)它出現未定義，但如預期alert(id2)作品。 任何人都可以解釋爲什麼我不能拿起data('section')。

我一直在使用$(this).attr('data-section')

Answer 1

$(this)事件處理程序中也試過指沒有data-section屬性<select>元素。

要獲得所選<option>的值，可以使用option:selected選擇器。

var id1 = $(this).children('option:selected').data('section'); 

演示

$(document).ready(function() { 
 
    $('body').on('change', '.SS2', function() { 
 
    var id1 = $(this).children('option:selected').data('section'); 
 
    var id2 = $(this).val(); 
 
    alert(id1); 
 
    // alert(id2); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select class="SS2" name="nSS"> 
 
    <option class="SSO" data-section="1" selected="selected" disabled="disabled">Select an Option</option> 
 
    <option class="SSO" data-section="1" value="1">option 1</option> 
 
    <option class="SSO" data-section="1" value="2">option 2</option> 
 
</select>

當然