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

Question

我试图获取一个option元素的标题，但它总是返回未定义的信息。$(this).attr("name")…也会发生这种情况和$(this).attr("value")，但奇怪的是$(this).val()可以正常工作(正如预期的那样)。不过，我可以用$(this).attr("value", "baz")来设置这个值。

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

Answer 1

this指向<select>元素。对于选定的选项，请使用：

this.options[this.selectedIndex]

完整代码(您可以安全地解开$opt的jquery包装器，并使用$opt.title和$opt.name，它们在所有浏览器上都是安全的)：

$('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-way是：

$('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属性，所以它是未定义的。您需要做的是枚举select的选项列表，并找到所选的项。然后，您可以对该项目进行操作以查找信息，如下所示：

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

 element.attr('title');