jquery hide() not working in chrome

Question

I use jquery popup dialog, and in this dialog I have input and select box, i want to hide some options in select box, its worked in ff, but not worked in chrome .

<input type="text" onkeyup="search(this.value)" >

<select id="cl_sel_l"  multiple="multiple">
   <option value='2' id='c_2'>aa</option>
   <option value='3' id='c_3'>bb</option>
   <option value='4' id='c_4'>cc</option>
   <option value='5' id='c_5'>dd</option>
</select>

var clients = new Array();
clients[2] ='aa';
clients[3] ='bb';
clients[4] ='cc';
clients[5] ='dd';

function search(val) {
    for ( var i in clients) {
        if (clients[i].toLowerCase().search(val.toLowerCase()) == -1) {
            $("#cl_sel_l").find("#c_" + i).hide();
        } else {
            $("#cl_sel_l").find("#c_" + i).show();
        }
    }
}

Also, IDs should be unique, so there's no need to add the parent prerequisite. `$('#c_'+i).hide();` should be sufficient. — BenM, Aug 15 '13 at 14:46
How is hide not working? If the option is selected and then you try to hide that option it will remain until another option is selected (though it won't show in the options menu). You probably should have a blank option that you can select as the default and then hide the options that need to go away. — scrappedcola, Aug 15 '13 at 14:53
I have another select when i was remove option from first select and append in to second select and then do search it hides from second select box, for that reason I write $("#cl_sel_l").find("#c_" + i).hide(); — Lusi, Aug 15 '13 at 14:53

score 3 · Accepted Answer · edited May 23 '14 at 23:29

display: none (which is what jQuery's hide() function does to matched elements) will not work for option elements in a reliable, cross-browser manner. Instead, you need to remove them from the DOM, and then add them back in after the search.

This is a little tricky, as you need to store the original order. I'd be tempted to just delete non-matches, and then restore. Something like this:

var clients = new Array();
clients[2] ='aa';
clients[3] ='bb';
clients[4] ='cc';
clients[5] ='dd';
var restore;

function search(val) {
    $('#cl_sel_l').html(restore);
    for ( var i in clients) {
        if (clients[i].toLowerCase().search(val.toLowerCase()) == -1) {
            $("#c_" + i).remove();
        }
    }
}

$(function() { restore = $('#cl_sel_l').html(); });

See this jsFiddle

I've just found this: http://uanguei.info/2012/08/cross-browser-solution-for-hidding-option-in-select-list/. Isn't this a better option? If you have multiple select elements you don't need to duplicate them all, you just manage a single list for each. — Yaron, Jul 07 '14 at 04:49

score 1 · Answer 2 · answered Aug 15 '13 at 14:58

The .hide() function in jQuery works by applying the CSS display: none rule. This rule is not applicable to <option> elements.

I would suggest using the .detach() function instead. This allows you to remove an element from the DOM, but it also retains the ability to put it back in later using .appendTo().

Before calling the search(val) function, create an array of all the elements in the <select> box. Then, loop over each element and detach that ones you'd like to hide.

jquery hide() not working in chrome

2 Answers2

Linked