.data() JQuery 返回未定义

Question

我正在使用我的第一个 web 应用程序，我使用 ajax 解析对象将动态内容添加到一个特定的 .html 中......在这样做的同时，我发现在选择下拉列表的每个选项中添加 data-* 属性时存在问题。 . 当 JQuery 中的 change 函数执行时，它返回 undefined。

这是我的 ajax 函数，（我知道这不是最好的方法）。

ajaxPost("link/x.php",{},function(result){
            var json=JSON.parse(result);
            var resultado=json.response;
            if(json.error==0){
            var estadosString='<option value=""></option>';
            var cont=0;
                for(estado in resultado){
                   estadosString+=('<option value="'+resultado[estado].nombre+'">'+resultado[estado].nombre+'</option>');
                }
                $('#estados').html(estadosString);
                cont=0;
                $('#estados option').each(function(){
                    $(this).attr('data-id',cont);
                    $(this).data('id',cont++);

                });

            }else{
              alert("No hay estados");
            }
        });

data-id 属性已成功添加到每个选项，当我使用此代码在更改选择选项上获取 data-id 时，问题就开始了。

$('#estados').on('change',function(){
            alert($(this).data("id"));

        });

它总是返回未定义，任何人都可以帮助我吗？谢谢..！

Answer 1

“更改”处理程序中this 的值将是<select> 元素，而不是设置为的<option>。您可以通过 select 元素的 selectedIndex 属性或通过 jQuery 找到 option 元素。

也没有理由设置“data-id”属性；只需通过.data() 设置值。