JavaScript: Options with display:none not hidden on Internet Explorer

From The Travis van der Font Wiki
Jump to: navigation, search

Internet Explorer is garbage and doesn't support display:none on option elements.

Solution

Use remove() or detach() from jQuery. For simple implementation using remove() is suggested.

The simplest solution is using the remove() function. Apply this functionality after all the processing logic for the selection. It checks for any hidden displays which will be using none and will simply remove them.
$("#select").children('option').each(function ()
{
    var current_option = $(this);  

    if (current_option.css('display') == 'none')
    {
        current_option.remove();
    }
});
A bit more advance solution. Set the class as 'hidden' to options which are to be hidden. Then, cache the select and process the select using the detect() function. After, append all elements from the cache select which do NOT have class 'hidden' set in the option. Apply this functionality after all the processing logic for the selection.
(function ()
{
   // cache List
   var options = $('select option');

   // clear list
   options.detach();
   
   // rebuild list
   options.not('.hidden').appendTo('select');
   
   // set Default
   $('select').val('');
})();