Is there a universal way to "close" a <select> dropdown menu (not .blur() )?

Question

There's a neat trick you can use to "close" a <select> dropdown menu.

$('#test').click(function(){
    $('#test').hide();
    setTimeout(function(){
        $('#test').show();
    },20);
});​

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 $('#test') so they don't hide. In Windows, the menu with options is considered part of $('#test') so when you hide that, the menu hides along with it.

So the question is, is there a way to "close" a <select> dropdown menu that works in any browser and on any OS?

---

UPDATE

I don't mean using .blur() and this is why. I have some code that emulates a dropdown menu but is actually <select multiple>. So I have just a normal <select> visible and when I click on it, I replace it with an absolutely positioned <select multiple> element. After selecting the options, this goes away and the <select> element comes back. Any help on this would be great.

Solution 1

If you change the event from click to focus, it might help:

$("#test").focus(function () {
    // Your original code

    // or: this.blur();
    // just DON'T call this.focus()
});

Solution 2

I haven't tested it yet but I would imagine, you can just

$('select').blur();

or set focus on something else to close it

Update - oh there you go first commenter has the fiddle

Solution 3

select is not meant for this, you can however create some other markup to fake the select layout.

HTML

option 1

option 2

option 3

JS

$('#test').click(function() {
    $(this).toggleClass('open');
}).find('li').not(':first').on('hover',function() {
   $(this).parent().removeClass('open');
});​

CSS

ul {
   list-style:none  ;
   border : solid 1px Gray;    
   width: 80px;
   height: 20px;
   overflow:hidden;
   cursor:pointer;
}
ul.open {
 height: 60px;   
}

​

Here's a demo. You can style the markup as you want.