เมื่อเลือกการเปลี่ยนแปลงรับค่า data data

รหัสต่อไปนี้จะส่งกลับ 'ไม่ได้กำหนด' ...

$('select').change(function(){
    alert($(this).data('id'));
});

<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

คุณต้องค้นหาตัวเลือกที่เลือก:

$(this).find(':selected').data('id')

หรือ

$(this).find(':selected').attr('data-id')

แม้ว่าวิธีแรกจะเป็นที่ต้องการ

ลองทำสิ่งต่อไปนี้:

$('select').change(function(){
  alert($(this).children('option:selected').data('id'));
});

ผู้สมัครสมาชิกการเปลี่ยนแปลงของคุณสมัครรับข้อมูลเหตุการณ์การเปลี่ยนแปลงของตัวเลือกดังนั้นthisพารามิเตอร์จึงเป็นองค์ประกอบที่เลือก คุณต้องค้นหาเด็กที่เลือกเพื่อรับ data-id

document.querySelector('select').onchange = function(){   
   alert(this.selectedOptions[0].getAttribute('data-attr')); 
};

Vanilla Javascript:

this.querySelector(':checked').getAttribute('data-id')

คุณสามารถใช้contextไวยากรณ์ด้วยหรือthis นี่คือผลเช่นเดียวกับ$(this)find()

$('select').change(function() {
    console.log('Clicked option value => ' + $(this).val());
    <!-- undefined console.log('$(this) without explicit :select => ' + $(this).data('id')); -->
    <!-- error console.log('this without explicit :select => ' + this.data('id')); -->
    console.log(':select & $(this) =>    ' + $(':selected', $(this)).data('id'));
    console.log(':select & this =>       ' + $(':selected', this).data('id'));
    console.log('option:select & this => ' + $('option:selected', this).data('id'));
    console.log('$(this) & find =>       ' + $(this).find(':selected').data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

เป็นเรื่องของ microoptimization find()คุณอาจเลือกใช้ หากคุณเป็นนักกอล์ฟมากขึ้นไวยากรณ์บริบทจะสั้นกว่า มันเป็นรูปแบบการเข้ารหัสโดยทั่วไป

นี่คือการเปรียบเทียบผลการดำเนินงานที่เกี่ยวข้อง

$('#foo option:selected').data('id');

มันใช้งานได้สำหรับฉัน

<select class="form-control" id="foo">
    <option value="first" data-id="1">first</option>
    <option value="second" data-id="2">second</option>
</select>

และสคริปต์

$('#foo').on("change",function(){
    var dataid = $("#foo option:selected").attr('data-id');
    alert(dataid)
});