jquery hide() not working in chrome -

i use jquery popup dialog, , in dialog have input , select box, want hide options in select box, worked in ff, 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) {     ( var 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();         }     } } 

display: none (which jquery's hide() function matched elements) not work option elements in reliable, cross-browser manner. instead, need remove them dom, , add them in after search.

this little tricky, need store original order. i'd tempted delete non-matches, , restore. 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);     ( var in clients) {         if (clients[i].tolowercase().search(val.tolowercase()) == -1) {             $("#c_" + i).remove();         }     } }  $(function() { restore = $('#cl_sel_l').html(); }); 

see jsfiddle