查看这段代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="Template/js/jquery-1.9.0.min.js" ></script>
<script>
$(document).ready(function(){
$(".myselect").change(function(){
alert( $(this).attr('data-spacing') );
});
});
</script>
</head>
<body>
<select name="type" class="myselect">
<option data-spacing="001" value="" selected >Select A Camera</option>
<option data-spacing="002" value="Nicon_D500">Nicon D500</option>
<option data-spacing="004" value="Nicon_D600">Nicon D600</option>
<option data-spacing="003" value="Canon_S900">Canon S900</option>
</select>
</body>
</html>
data-custom属性适用于任何事物，
但它不适用于 <select>和 <option>标签。
此源代码返回“未定义”
请帮助我。
最佳答案
data 属性属于 option 元素，但更改处理程序已注册到 select 元素，因此更改处理程序中的 this 指的是没有 data- 的 select 元素* 属性
您需要找到实际选择的 option 元素(您可以使用 :selected-selector )来执行此操作。
也使用 .data() api读取data-*
$(document).ready(function () {
$(".myselect").change(function () {
alert($(this).find('option:selected').data('spacing'));
});
});
演示:Fiddle
关于jquery - 自定义数据属性在 <select> 标签内不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21049995/