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

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.

  • MVC - html.dropdownlist - calling javascript or controller/method directly?
  • Datatable inline editing without editor plugin
  • How to change the main display of dropdown when an item is selected in bootstrap
  • Add select dropdown box to onclick swap image js
  • Working code to search within dropdown menu
  • Show/hide options on bootstrap-select?
  • 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.

  • Blur issues on drop-down search box in jQuery
  • Embedding tableau views in webpage using HTML/JavaScript
  • Get value of selected <option> in ddSlick dropdown
  • Clear dropdown selection on radio button click
  • ASP.NET - losing selection of dropdownlist populated via javascript
  • Close Bootstrap Dropdown after link click
  • 4 Solutions collect form web for “Is there a universal way to “close” a <select> dropdown menu (not .blur() )?”

    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()
    });
    

    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

    How about using .blur() on click().. unfortunately I cannot test them all now..

    $('select').click(function(){ 
       $(this).blur(); 
    });
    

    DEMO: http://jsfiddle.net/vqA3M/7/

    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.