title: How to programmatically click Select element and trigger onChange handler?
body: <p>For example, with the following code. I tried several solutions.</p>
  
  <pre><code>function handleChange() {
      alert('hello')
  }
  
  &lt;select id="names" onchange="handleChange()"&gt;
      &lt;option&gt;Foo&lt;/option&gt;
      &lt;option&gt;Bar&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>Solution 1.</strong></p>
  
  <pre><code>document.getElementById('#select').selectedIndex = 1
  </code></pre>
  
  <p>This would change the value and display of select but doesn't trigger handleChange();</p>
  
  <p><strong>Solution 2</strong></p>
  
  <pre><code>var element = document.getElementById('names');
  var event = new Event('change');
  element.dispatchEvent(event);
  </code></pre>
  
  <p>This returns true but still doesn't trigger handleChange();</p>
  
  <hr>
  
  <p>Any ideas on how to do this? Or can it actually be done? Solution has to be javascript/html only and sadly no jQuery.</p>