JQuery Hide Option doesn't work in IE and Safari

Question

I\'m trying to hide a few options in a dropdown box using .hide(). This works perfectly fine in firefox and chrome, but it doesn\'t work in IE and Safari. My original code i

Answer 1

I tried in many different ways but this solution seems reasonable and I have used in my code. No plugins required simple register function with jquery object

Solution at glance:

(function ($) {


$('#showOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', true);
});

$('#hideOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', false);
});

 $.fn.showHideDropdownOptions = function(value, canShowOption) { 

         $(this).find('option[value="' + value + '"]').map(function () {
            return $(this).parent('span').length === 0 ? this : null;
        }).wrap('<span>').hide();

        if (canShowOption) 
            $(this).find('option[value="' + value + '"]').unwrap().show();
        else 
            $(this).find('option[value="' + value + '"]').hide();

}



})(jQuery);

Here is the complete implementation http://jsfiddle.net/8uxD7/3/

Answer 2

Safari renders things differently and uses a UI overlay for dropdowns. You can't just hide them, but you can refresh the options match from array each time. Here I use jQuery to clear a select options each time and create new options:

myFunction();

function myFunction() {

  //alert("dins");

    var select = document.getElementById("selectArticles");
  var options = ["NouCreus", "Pic de l'Àliga", "Puigmal", "Finestrelles", "NouFonts", "Núria Estació"];
  
    var i, L = select.options.length - 1;
  for(i = L; i >= 0; i--) {
     select.remove(i);
  }

    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("inputPatro");
    filter = input.value.toUpperCase();
  
  var el = document.createElement("option");
      el.textContent = "Vall de Núria";
      el.value = "-1";
      select.appendChild(el);

  for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    if (opt.toUpperCase().indexOf(filter) > -1) {
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      select.appendChild(el);
    }
  }
}

<input type="text" id="inputPatro" onchange="myFunction()" placeholder="Filtre per nom.." title="Escriu un patró per filtrar les opcionw del desplegable">
<select id="selectArticles">
</select>

Answer 3

This will work.. change .show to .showOption and .hideOption. However this still kind of sucks in IE because in firefox you can make it hide an option which is selected. So if "Select One" is shown and is hidden. Firefox will still say "select one".

$.fn.showOption = function() {
this.each(function() {
    if( this.tagName == "OPTION" ) {
        var opt = this;
        if( $(this).parent().get(0).tagName == "SPAN" ) {
            var span = $(this).parent().get(0);
            $(span).replaceWith(opt);
            $(span).remove();
        }
        opt.disabled = false;
        $(opt).show();
    }
});
return this;
}
$.fn.hideOption = function() {
this.each(function() {
    if( this.tagName == "OPTION" ) {
        var opt = this;
        if( $(this).parent().get(0).tagName == "SPAN" ) {
            var span = $(this).parent().get(0);
            $(span).hide();
        } else {
            $(opt).wrap("span").hide();
        }
        opt.disabled = true;
    }
});
return this;
}

Answer 4

I tried the solution that uses <span> around options, but found that it didn't work for me in all browsers.

I've made a jQuery Plugin that solves this very nicely. With it, you would do this:

$('#selection1').hideOption('1');
$('#selection1').showOption('1');

You can hide and show them as much as you want, and they will keep their original order and any .data('x') values you've assigned to the option. It works in all browsers. You can see that in this sample: jsFiddle - Toggle Dropdown Options

You can get the Toggle Dropdown Options plug-in. If you don't like plug-ins, just copy the JavaScript code from it to your own project's JavaScript file. See the Read the Docs link on the plug-in for more information!

Answer 5

I found one workaround for this, Just wrap with Jquery wrap()) to option you want to hide,it will hidden automatically and unwrap span with unwrap() to show it again.

Answer 6

You're right. Some browsers just won't let you hide option elements. You'll likely need to remove them.

Although perhaps a better (or at least an alternate) possibility would be to disable them.

$(".wrapper1").prop('disbled', true);