title: jQuery & Ajax - Load items to a select input when page loads
body: <p>I have 2 <code>&lt;select&gt;</code> inputs:</p>
  
  <pre><code>&lt;select id="state"&gt;
    &lt;option value="" selected&gt;Select&lt;/option&gt;
    &lt;option value="california"&gt;California&lt;/option&gt;
    &lt;option value="new-york"&gt;New York&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="city"&gt;
    &lt;option value=""&gt;Select&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And the jQuery/AJAX code:</p>
  
  <pre><code>$('#state').change(function() {
      var id=$(this).val();
      var dataString = 'state='+id;
      $.ajax({
          type: 'POST',
          url: scriptpath+'../ajax/fields.php',
          data: dataString,
          cache: false,
          success: function(output) {
              $('#city').html(null);
              $('#city').append(output);
          },
      });
  });
  </code></pre>
  
  <p><strong>Explanation:</strong> Everything works fine. The <code>#city</code> input changes depending on the <code>#state</code> input value... Now if I load the page having <code>"california"</code> as the <code>default</code> value -- the <code>#city</code> input doesn't change since it's using the <code>.change()</code> event. How do I detect the selected value on the <code>#state</code> input when the page loads?</p>
  
  <p>I've tried <code>$('#state').on("change load",function() {</code> without success.</p>
  
  <p>Any ideas? Thanks in advance</p>