Question

I have a select box object and an ajax function is called OnChange using the selected value as an input. I also want to call the the same function when the select box is first loaded. I use jQuery .load, but the ajax function is called before any of the options are loaded and the input to my ajax function is undefined. Does anyone know how to get jQuery to wait for all the options to load before calling the function?

Thanks.

Edit – Adding Code
I have found that a setTimeout() works pretty well to delay the function. However, I get nervous using setTimeout() because if the page loads slower than usual, it won’t work. I tried replacing the timeout with $(document).ready as you suggested, but the function was still called before an option was selected and the input was undefined.

Here’s the code:

<script type="text/JavaScript">    
    setTimeout('AjaxFunction($("#SelectID option:selected").val()));', 400);
</script>

<select id="SelectID" name="SelectName" onchange="AjaxFunction(this.value);">
<option value='Inland Empire'>Inland Empire</option>
<option value='San Bernardino'>San Bernardino</option>  
<option value='Riverside'>Riverside</option>
<option value='California'>California</option>  
</select>

Answer 1

You should consider removing the onchange= and using one of the below methods to bind the event / execute it:

<select id="SelectID" name="SelectName">
  <option value='Inland Empire'>Inland Empire</option>
  <option value='San Bernardino'>San Bernardino</option>  
  <option value='Riverside'>Riverside</option>
  <option value='California'>California</option>  
</select>

<script type="text/JavaScript">
    // placing the script after the select SHOULD ensure it executes after the 
    // select has been created
    $("#SelectID").change(function() {  // bind a change event:
      AjaxFunction($(this).val());
    }).change(); // and trigger a "change" event immediately

    // If you are using .load to bring #SelectID into existence, 
    // it would be much better to put the whole segment into the callback of
    // .load() as suggested by gaby

    $("#sometarget").load("/some-url-with-select-box", function() {
      // bind and trigger change event (alternate forms)
      $("#SelectID").bind('change', function() {
        AjaxFunction($(this).val());
      }).trigger('change');    
    });
</script>