title: Is there a universal way to "close" a <select> dropdown menu (not .blur() )?
body: <p>There's a neat trick you can use to <a href="http://jsfiddle.net/vqA3M/6/" rel="nofollow">"close"</a> a <code>&lt;select&gt;</code> dropdown menu.</p>
  
  <pre><code>$('#test').click(function(){
      $('#test').hide();
      setTimeout(function(){
          $('#test').show();
      },20);
  });​
  </code></pre>
  
  <p>This seems to always work for Chrome and Firefox on Windows. IE works in my actual code, but when I test the jsfiddle code in IE, it doesn't work. And on a mac, this doesn't work for any browser. The difference between Mac and Windows is that on Mac, the options are opened in their own element (kinda - inspecting the page shows no new elements). So the dropdown bar hides and comes back, but the new menu with the options aren't considered a part of <code>$('#test')</code> so they don't hide. In Windows, the menu with options is considered part of <code>$('#test')</code> so when you hide that, the menu hides along with it.</p>
  
  <p><strong>So the question is, is there a way to "close" a <code>&lt;select&gt;</code> dropdown menu that works in any browser and on any OS?</strong>
  <hr>
  <strong>UPDATE</strong></p>
  
  <p>I don't mean using <code>.blur()</code> and this is why. I have some code that emulates a dropdown menu but is actually <code>&lt;select multiple&gt;</code>. So I have just a normal <code>&lt;select&gt;</code> visible and when I click on it, I replace it with an absolutely positioned <code>&lt;select multiple&gt;</code> element. After selecting the options, this goes away and the <code>&lt;select&gt;</code> element comes back. Any help on this would be great.</p>