title: How can I add a 'change' event listener for a styled select?
body: <p>Obviously, if I have a 'select' element, I can add an event listener for changes using some basic JS:</p>
  <pre><code>document.querySelector('select').addEventListener('change', function(ev){
    console.log('Changed', ev.target.value)
  })
  </code></pre>
  <p>Click the 'select' element, modify the value, the log fires. Simple stuff.</p>
  <p>However I'm working on a library for styled select boxes - like <em>chosen</em> or <em>select2</em> without the jQuery dependency.</p>
  <p>In my library, clicking the styled select box changes the <code>.value</code> of the real select box:</p>
  <pre><code>query('select').value = newValue;
  </code></pre>
  <p>I can see this is working if I make the real select box visible.</p>
  <p>However, changing the <code>value</code> of the select box through JS doesn't trigger the <code>select</code> boxes 'change' event.</p>
  <p><strong>Is there a way I can change the select boxes value though JS and still have <code>change</code> events attached to the select box fire?</strong></p>