Select list value undefined in $(document).ready

Question

I have the following code, which I want to load values on a selection change, and also do the selection load initially (since FF 'saves' the last value of the drop down under certain circumstances).

The select part of the function works correctly, but for some reason when calling load2 directly the value of $('#select1').value is undefined, even though when I check the DOM in Firebug right after load select1.value has a value.

How can I run the load2 function after select1.value is ready? What event will tell me when all the elements of $('#select1') have been initialized?

$(document).ready(function() {
    //Setup change hook 
    $('#select1').change(function(event) {
        //Remove the old options right away
        $('#select2').find('option').remove();
        //Load the new options
        load2(this.value);
    });

    //Do load for current value
    load2($('#select1').value);
});

Answer 1

If I understand properly, you could check to see if a value exists, then run it:

if ($('#select1').value) {
    load2($('#select1').value);
}

Answer 2

AFAIK the jQuery object does not have any value field. Hence, I would expect the following statement to pass a value of undefined to the load2()function:

load2($('#select1').value);

The jQuery object does, however, have a val() function. Try using that instead:

load2($('#select1').val());

Alternatively, you should be able to access the DOM field value like this:

load2($('#select1').get(0).value);