jquery $（this）.attr（...）返回undefined

Question

我在尝试获取option元素的标题，但它始终返回undefined。这也发生了$(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的方法是：

$('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元素。由于选择节点不具有title属性，因此未定义。您需要做的是枚举选择的选项列表并找到选定的项目。然后，您可以对该项目进行操作以查找如下信息：

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

element.attr('title');