title: Populate HTML dropdown onclick
body: <p>I have a page which contains multiple HTML <code>select</code> dropdowns, and requires population <code>onclick</code> of the element. This population is done using an AJAX call in the click event listener of the <code>select</code> elements.</p>
  
  <p>The reason for this is that performance and load are very crucial, and therefore they cannot be populated on page load.</p>
  
  <p>Also, the design <strong>must</strong> use the native HTML <code>select</code> element.</p>
  
  <hr>
  
  <p>I have created a jsFiddle demo to show the issue. When you click on the <code>select</code> the items are populated, and the width of the <code>select</code> increases as a result.</p>
  
  <p><img src="https://i.stack.imgur.com/qFfYm.jpg" alt="enter image description here"></p>
  
  <p>However the <code>select</code> only displays the initial option (prior to AJAX population).</p>
  
  <h2><strong><a href="http://jsfiddle.net/PJvM3/16/" rel="nofollow noreferrer">------ View Demo ------</a></strong></h2>
  
  <p><em>Demo uses <code>setTimeout()</code> of 50 milliseconds to emulate an AJAX response time.</em></p>
  
  <hr>
  
  <p>How can I get this to populate <code>onclick</code>, and display correctly?</p>
  
  <p>Is there a way of opening the <code>select</code> on callback of the popualation response?</p>
  
  <p><strong>EDIT: Alternatively, is there a jQuery plugin dropdown, which uses the browser's native theme for styling?</strong></p>
  
  <hr>
  
  <p><strong>What I've tried so far</strong></p>
  
  <ul>
  <li>Populating the <code>select</code> on hover, however a quick user can open the <code>select</code> before the options have loaded. Also, if a user was to scroll all the way down the page, and over every <code>select</code>, this would cause a lot of unnecessary AJAX calls.</li>
  <li>Changing the event listener to <code>focus</code> instead of <code>click</code> (as <a href="https://stackoverflow.com/a/12898728/370103">@AndyPerlitch</a> suggested). However, this wouldn't work if the AJAX request took only 50 milliseconds to respond. (<a href="http://jsfiddle.net/PJvM3/7/" rel="nofollow noreferrer">See Demo</a>)</li>
  <li>Changing the event listener to <code>mousedown</code> has the same effect as <code>focus</code></li>
  </ul>
  
  <hr>
  
  <p><strong>UPDATE:</strong> This is not an issue in FireFox. <code>select</code> opens, then loads new items and displays them, all while in an open state.</p>