Question

请参阅此代码：

<!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>代码。

此源代码返回“未定义”
请帮帮我。

Answer 1

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

Answer 2

将其更改为

$(this).data('spacing')

自定义数据属性在<select>标记</select>中无效

2 个答案: