.data() JQuery returns undefined

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属性已成功添加到每个选项中，当我使用此代码获取change-select选项的data-id时，问题就开始了。

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

它总是返回undefined，有人能帮我吗？谢谢

Answer 1

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

也没有理由设置"data-id"属性；只需通过CCD_ 5设置该值。