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

Question

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

看到这段代码:

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

Run Code Online (Sandbox Code Playgroud)

该data-custom属性适用于任何事情,
但它不适用于<select>和<option>标签.

此源代码返回"Undefined"
请帮帮我.

Answer 1

Aru*_*hny 10

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

Run Code Online (Sandbox Code Playgroud)

演示:小提琴

归档时间：	12 年，4 月前
查看次数：	765 次
最近记录：	12 年，4 月前