jQuery wait for all select options to load_问答_开发者

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>

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>

Can you show some code that you have so far? Using jQuery's ready() function should accomplish what you want. It basically waits for the entire DOM to load before it executes.

 $(document).ready(function(){
    //code here runs after the DOM is created
 });

if you use jquery.load to load for the first time the contents of the select box the first time then you should use the callback parameter of the load function to add your ajaxFunction ..

so ..

wherever/whenever you call the load function do it like this

$("some_selector_where_you_load_the_select_box")
.load("somepage.htm", 
      function(){ AjaxFunction( $("#SelectID option:selected").val() ); }
     );

also instead of calling the AjaxFunction yourself you can just trigger the change event and let the select box handle the AjaxFunction on its own .. (useful if you do this with multiple select boxes)

that would be

$("some_selector_where_you_load_the_select_box")
.load("somepage.htm", 
      function(){ $("#SelectID").change(); }
     );

jQuery's document.ready should work. What browser are you testing this? Try Firefox with Firebug to see if any errors are reported. In your setTimeout code you have one extra closing parenthesis. Could this be causing the problem?

As a shortcut for the $(document).ready(function() {...}) syntax, you can use the following to run some code just after the document is ready:

$(function() {
    alert("doc ready");
});

So a complete example would be:

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.3.2.js"></script>
    <script type="text/JavaScript">
        function AjaxFunction(val) {
            alert(val);
        }

        $(function() {
            AjaxFunction($("#SelectID option:selected").val());
        });
    </script>
</head>
<body>
    <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>
</body>

The best way to accomplish this is to delay the setting of the on change trigger of the select and dynamically tell it what to do on change. In order to get it to fire as soon as the you just utilize the change() function. So here's what it would look like:

$(document).ready(function(){

  //At this point the select should be fully built, dynamically add the on change handler.

  $('#SelectID').change(AjaxFunction);

  //Fire the change event immediately.

  $('#SelectID').change();
});