Khi chọn thay đổi, nhận giá trị thuộc tính dữ liệu

Đoạn mã sau trả về 'không xác định' ...

$('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>

Bạn cần tìm tùy chọn đã chọn:

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

hoặc là

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

mặc dù phương pháp đầu tiên được ưa thích

Hãy thử như sau:

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

Thuê bao thay đổi của bạn đăng ký vào sự kiện thay đổi của lựa chọn, vì vậy thistham số là thành phần chọn. Bạn cần tìm đứa trẻ được chọn để lấy id dữ liệu từ đó.

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

Vani Javascript:

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

Bạn có thể sử dụng contextcú pháp với thishoặc $(this). Đây là hiệu ứng tương tự như 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>

Là một vấn đề của vi mô hóa, bạn có thể chọn find(). Nếu bạn là người chơi mã nhiều hơn, cú pháp ngữ cảnh ngắn gọn hơn. Về cơ bản, nó đi xuống phong cách mã hóa.

Dưới đây là một so sánh hiệu suất có liên quan .

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

cái này hiệu quả với tôi

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

và kịch bản

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