jquery $(this).attr(…) 返回未定义

Question

我正在尝试获取 option 元素的标题，但它始终返回未定义。 $(this).attr("name")...和 ​​$(this).attr("value") 也会发生这种情况，但奇怪的是 $( this).val() 有效（如预期）。不过，我可以使用 $(this).attr("value", "baz") 设置该值。

小提琴： http://jsfiddle.net/jshado1/JgAJC/1/

Answer 1

this 指向 元素。对于所选选项，使用：

this.options[this.selectedIndex]

完整代码（您可以安全地解开 $opt 的 jquery 包装器，并使用 $opt.title 和 $opt.name< /code>，这些在所有浏览器中都是安全的）：

$('select').change(function() {
    var $opt = $(this.options[this.selectedIndex]),
        t = $opt.attr("title"),
        n = $opt.attr("name"),
        v = this.value;
    $("#name").text("name: "+n);
    $("#title").text("title: "+n);
    $("#value").text("value: "+v);
});

另一种方法，jQuery 方式是：

$('select').change(function() {
    var $opt = $(this).children(':selected'),
        t = $opt.attr("title"),
        n = $opt.attr("name"),
        v = this.value;
    $("#name").text("name: "+n);
    $("#title").text("title: "+n);
    $("#value").text("value: "+v);
});

Answer 2

这是因为您错误地理解了 this 在代码中代表的含义。 this 表示已更改的 select 元素。因为 select 节点没有 title 属性，所以它是未定义的。您需要做的是枚举选择的选项列表并找到选定的项目。然后，您可以对该项目进行操作以查找信息，如下所示：

 var element = $(this.options[this.selectedIndex]);

 element.attr('title');