为什么我的代码中val（）返回的值是空的？

Question

我试图将打开对话框的UI从显示要从选择框内部打开的文件列表更改为包含2列的表。

原始代码：

JSP

<select size="15" id="options" class="dialog-pane-right"></select>

JavaScript的

for (var index = 0; index < length; index++) {
        var page = data[index];   //data: data to be listed inside select box
        var id = page.id || page;
        var title = page.title || id;

        var $option = $("<option></option>");
        $option.html(title);
        $option.attr("value", id);
}

单击时提醒选择

choice = $('select#options option');
choice.click(function(){
    alert($(this).val);
});

现在我将选择框更改为这样的表：

JSP

<table id="load-opt"></table>

JavaScript的

for(var ind=0; ind<data.length; ind++) {
    //name is the name and desc is the description for each option
    var $option = $("<tr></tr>");
    $option.html("<td>"+name+"</td><td>"+desc+"</td>");
    $option.attr("value", id);
}

单击时提醒选择

var choice = $('table#load-opt tr td');
choice.click(function(){
    alert($(this.val()); 
});

前者会提示我单击的文件名，而后者会提示一个空的警告框。 谁能解释为什么会这样？

Answer 1

jQuery的val()方法用于获取或设置一个或多个元素的value属性。

在您的情况下，发生这种情况是因为HTMLOptionElement （ <option> ）具有一个value属性，而HTMLTableCellElement （ <td> ）没有一个属性。 您应该使用.text()而不是.val() ，例如：

var choice = $('table#load-opt tr td');
choice.click(function(){
    alert($(this.text()); 
});