title: Triggering an onchange event within an onload function
body: <p>I have a webpage with two drop down menus. The first one (<code>id = ddlIndustry</code>) has a 'Go' button that refreshes the page after selecting an option from the drop down. Once this is done, a selection can be made in the second drop down (<code>id = region</code>). This has an onchange property that is triggered and refreshes the page when a selection is made.</p>
  
  <p>I am trying to write a set of commands in Javascript that selects an option from the first dropdown, clicks the 'Go' button, and once the page is refreshed, selects an option from the second drop down and programatically triggers the onchange event.</p>
  
  <p>The code I have so far is:</p>
  
  <pre><code>document.all.ddlIndustry.selectedIndex = 21;
  document.getElementById("cmdChart").click();
  window.onload = function(){
      document.all.region.selectedIndex = 2;
      document.all.region.onchange();
  };
  </code></pre>
  
  <p>This lets me select a <code>ddlIindustry</code> index and press 'Go', but does not select a region and trigger an onchange event. However, when I select an industry and press go manually, the second part of the code: </p>
  
  <pre><code>document.all.region.selectedIndex = 2;
  document.all.region.onchange();
  </code></pre>
  
  <p>does allow me to select a region and trigger the onchange event.</p>
  
  <p>How can I do both things together?</p>
  
  <p>Edit: I have tried this in both Chrome (Version 37.0.2062.120 m) and IE (Version 11.0.9600.17280)</p>