javascript - 为什么我的代码中 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's val() method用于获取或设置value一个或多个元素的属性。

就您而言，发生这种情况是因为 HTMLOptionElement ( <option> ) 有一个 value属性(property)，以及 HTMLTableCellElement ( <td> ) 没有。您应该使用.text()而不是.val() ，例如:

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