Question

我想获取选择选项的数据属性，但它不起作用

HTML

   <select class="form-control" id="device-selection" style="width:300px;">
        <option selected="selected">Choose!</option>
        <option data-width="1080" data-height="1920">Huewai p9</option>
   </select>

JS：

    $('#device-selection').onchange = function() {
        console.log($('#device-selection').data('width'));
        console.log($('#device-selection').data('height'));
    }

我继续收到此错误：

未捕获的TypeError：无法设置属性＆＃39; onchange＆＃39;为null

我的Jquery版本是3.1.1

Answer 1

＆＃13;

$('#device-selection').on("change", function() {

  console.log($('option:selected',this).data('width'));
  console.log($('option:selected',this).data('height'));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="device-selection" style="width:300px;">
        <option selected="selected">Choose!</option>
        <option data-width="1080" data-height="1920">Huewai p9</option>
   </select>

＆＃13;

Data attr应为$('#device-selection option:selected')

Answer 2

在jQuery中没有方法onchange。相反，您可以使用.on()将事件处理程序附加到元素并将change作为事件参数传递。

然后，为了访问data属性，您可以在事件处理程序方法中使用所选选项：$(this).find('option:selected');

＆＃13;

$('#device-selection').on('change', function() {
  var $selected = $(this).find('option:selected');
  console.log($selected.data('width'));
  console.log($selected.data('height'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" id="device-selection" style="width:300px;">
  <option selected="selected">Choose!</option>
  <option data-width="1080" data-height="1920">Huewai p9</option>
</select>

＆＃13;

Answer 3

我认为你应该这样写：

$( "#device-selection" ).change(function() {
    console.log($('#device-selection').data('width'));
    console.log($('#device-selection').data('height'));
});

Jquery文档：https://api.jquery.com/change/

检查W3shool示例：https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_change_ref

选择选项的Jquery数据属性

3 个答案: