title: call the change event after the SELECT is populated?
body: <p>So, I have a dynamically generated SELECT, that gets populated from a PHP-mySQL table.
  I also have an on change event for the select, that deals with the times the user changes the selected value on the page. When change event is fired, I populate 3 input boxes with values from that select option.</p>
  
  <p>It all works just fine, except, when I enter (or refresh) the page with the SELECT, the SELECT gets populated, but the onChange event does not fire. Actually I am sure that the onchange gets fired, but that happens before the SELECT is populated so there are no values to offer.
  What can I do? <strong>How can I call the change event after</strong> the <strong>SELECT is populated properly</strong> from php?</p>
  
  <p>My code for onChange is:</p>
  
  <pre><code>$(document).ready(function(){
      $('#myselect').change(function(){
        var selected = $(this).find('option:selected');
        $('#pux').val(selected.data('foo'));
      }).change();
  });
  </code></pre>
  
  <p>So basically, I want an input with the name and id = <strong>pux</strong> to be filled with the data-foo value of the select option. I mean, the structure of the options of the select is like:</p>
  
  <pre><code>&lt;option id="1" value="whatever" data-foo="something_important"&gt;First option&lt;/option&gt;
  </code></pre>
  
  <p>and of course the destination input box is:</p>
  
  <pre><code>&lt;input type="text" name="pux" id="pux" value="0" /&gt;
  </code></pre>
  
  <p>Like I said: the event works great on manual change of the select, but on page show (document.ready) the pux input box is set to nothing... empty...
  I want to be able to <strong>get the change event to fire after the select is populated</strong>. Since , after the select gets populated, <strong>the select box selects automatically the first option and displays it</strong>.</p>
  
  <ul>
  <li><p>I tried to use $(document).<strong>on("change"</strong>, function()... outside of document.ready but it's no change</p></li>
  <li><p>I also tried to set the value of the input, right after populating the SELECT from php but id does not seem to work. Either I place the code in the wrong place, or I do not know what to think anymore...</p></li>
  </ul>
  
  <p>My code that calls the php in order to populate it is:  </p>
  
  <pre><code>$('#myselect').toggle('fast', function(){
    $(this).html(ajaxloader);
    $(this).toggle('fast', function(){
      $.get(loadurl, function(data){
        $('#myselect').html(data);
        $('#myselect').selectmenu("refresh",true);
      },'html');
  // and here I placed my assignment
      var selx  = $('#myselect').find('option:selected');
      $('#pux').val(selx.data('foo'));
    });
  });
  </code></pre>
  
  <p>Still nothing...</p>
  
  <p>Any help would be appreciated.
  Thank you</p>