title: JavaScript: Continue with function after another function call finishes
body: <h3>Edits: <a href="http://jsfiddle.net/vol7ron/wQZdM/" rel="nofollow noreferrer">http://jsfiddle.net/vol7ron/wQZdM/</a></h3>
  <p>The fiddle should be used to help illustrate what I'm trying to do and what's happening.  The sub-selects should be populated with the second option value.</p>
  <hr />
  <h3>Original Question:</h3>
  <p>Not sure the best way to ask.  I'm creating a testing script to autofill inputs on a form.</p>
  <p>It includes a series of drop-down <code>select</code> boxes, which populate other <code>select</code> options in an onChange event.  When trying to auto-populate the form, the sub-selects don't have any options.</p>
  <pre><code>console.clear();
  
  // non-select inputs
  $(':input:not([type=&quot;hidden&quot;],[type=&quot;button&quot;])').each(function(){
     $(this).val($(this).attr('name'))          // test value is simple input's name
  });
  
  // select inputs
  var count=0, cutoff=7500;
  $('select').each(function(){
     var t = $(this);
     var c = t.children('option');
  
     while( c.length &lt;= 1 &amp;&amp; count &lt; cutoff){
        count++;
        c = $(this).children('option');       // tried not using the cache'd variable
        if (!(count % 10))
           console.log(count, c.length, &quot;No Options&quot;);  // debugging -- never exists early
  
        setTimeout(function(){},0);           // not really doing anything
     }
  
     t.val( c.eq(1).val() );                  // set value to second option value
     t.trigger('change');                     // calls the onChange even if it doesnt exist
  });
  
  // verify it does have data
  console.log($('#sub-select').children('option').length); // does have options
  </code></pre>
  <p>There's an AJAX call in the change event.  I could modify the callback, but this is just a simple set script for testing, that is run from console.  Any ideas?</p>