title: Triggering event "change" on select using bootstrap select plugin, only fires after second click
body: <p>So I've been making Marketo forms, and then adding personal styling and tweaks to improve the UI. One of those tweaks is to replace the existing select dropdowns with bootstrap select (small JS plugin that replaces them.)</p>
  
  <p>The two selects are linked, but when the original select changes, it requires the change event to trigger some conditional logic that determines whether another select should show. Now what I'm doing is binding a click event on the bootstrap select and then trying to fire the change event on the original select, like so:</p>
  
  <pre><code>$jQ('li').click(function() {
  
  console.log('LI Should trigger click on DD now.');
     event = document.createEvent("HTMLEvents");
     event.initEvent("change", true, false);
     input.dispatchEvent(event); 
  });
  </code></pre>
  
  <p>This has the desired effect, but only after a second click on the dropdown. So here what happens is if the user selects for example "America" from the bootstrap select, it updates the original select and then another dropdown containing "states" should appear, this will currently only happen the second time I click the bootstrap select. So say I select "America" then anything else, the state field will only appear then. Any ideas as to why that happens? The same thing is required to make the state field disappear too.</p>