Question

选择选项的 JQuery 数据属性

2017-06-21

7451

javascript jquery html

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

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

我一直收到此错误:

Uncaught TypeError: Cannot set property 'onchange' of null

我的 Jquery 版本是 3.1.1

Answer 1

497887632

数据attry 在选项选择器中应为 $（'＃设备选择选项：selected'）

guradio

2017-06-21

Answer 2

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

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

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

<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>

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