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

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

 element.attr('title');

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

2 个答案: