Why is the value returned by val() in my code empty?

Question

I tried to change the UI for an open dialog box from displaying the list of files to open from inside a select box to a table with 2 columns.

original code:

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);
}

alerting the choice when clicked on it

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

now I changed the select box to a table like this:

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);
}

alerting the choice when clicked on it

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

the former alerts the name of the file I clicked on, but the latter gives an empty alert box. Can anyone explain why this is happening?

Answer 1

The jQuery's val() method is used to get or set the value property of one or more elements.

In your case, it happens because the HTMLOptionElement ( <option> ) has a value property, and the HTMLTableCellElement ( <td> ) doesn't have one. You should use .text() instead of .val() , eg:

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