Why can't I access any properties on my jQuery-returned object?

Question

Hi!

I have the following javascript:

$(document).ready(function() {
    $('#<%= DropDownList1.ClientID %>').change(function() {
        $('#<%= TextBox1.ClientID %>').disabled = $('#<%= DropDownList1.ClientID %>').selectedIndex != 1;
    });
});

When I change the index of the dropdown, nothing happens. I have tried to replace the code with:

$(document).ready(function() {
    $('#<%= DropDownList1.ClientID %>').change(function() {
        alert($('#<%= DropDownList1.ClientID %>').id);                    
    });
});

This generates an alert that says 'undefined'. If I remove the .id-part I get an alert that says [object Object] so I guess it has got something. What am I doing wrong?

Answer 1

One key thing to realize in jQuery is that what is returned by the $(selector) is a jQuery object, not the DOM object. If you want to get the value for the select box from the jQuery object, you can use the val() function as in:

$("#element").val();

If you want to access the dom element from the jQuery object, that is easy, too. You can use the following:

$("#element")[0]; // equivalent to $("#element").get(0)

That should help you solve your problem.

Answer 2

$(document).ready(function()
{
    $('#<%= DropDownList1.ClientID %>').change(function()
    {
        // replace 'your value' with the value of dropdown selectedIndex 1
        if ($('#<%= DropDownList1.ClientID %>').val() == 'your value')
            $('#<%= TextBox1.ClientID %>').removeAttr('disabled');
        else
            $('#<%= TextBox1.ClientID %>').attr('disabled', 'disabled');
    });
});