<option> with display: no; not working on IE

Question

I have a style='display:none' element in an option element, it works well in Chrome, and I understand that it does not work on IE.

 <select> <option style="display:none;">One</option> <option>Two</option> <option style="display:none;">Three</option> <option>Four</option> </select> 

Using jQuery, how do I go through an option to find display:none and remove the <option> elements?

Answer 1

this works for me:

http://jsfiddle.net/PP4AP/1/

 $('select option').each(function(){ if(this.style.display == 'none') { $(this).remove(); } }); 

Answer 2

John Boker's decision is right for this question. But it has the disadvantage that you cannot ever retrieve these parameters after they are deleted.

One solution is to save the full HTML <select> code before removing the <option> tags.

 var $s = $('select'); $s.data("originalHTML", $s.html()); 

Now you can easily restore by changing this: $s.html($s.data("originalHTML"));

Full details of this solution: stack overflow

Also an example: http://jsfiddle.net/luken/9CYjy/

Answer 3

I had the same problem, but it was complicated, and yes, we need to remove this option to hide it in IE / Chrome / Safari.

But in some cases, we just want to Hide a group of options based on criteria / filter, and remove() simply completely removed. I have a solution to this problem. It deletes the parameters, but saves the parameter in the data attribute in the same select element, and if desired, we simply refill in the specified sort order (value or label).

Say:

 <select id='sorty' multiple=true> <option value="1">Group A</option> <option value="2">Group B</option> <option value="3">Group c</option> <option value="4">Group D</option> <option value="5">Group D</option> </select> <button onclick="HideG('A')">Hide Group A</button> <button onclick='HideG("B")'>Hide Group B</button> <button onclick='HideG("C")'>Hide Group C</button> <button onclick='HideG("D")'>Hide Group D</button> <button onclick='ShowAll()'>Show ALL</button> 

(jQuery required):

 function selectOptionFilter(src,filter,sortBy) { if(!$(src).data('hiddenOpts')) $(src).data('hiddenOpts',[]); //re-insert while keeping sort order by value or label $($(src).data('hiddenOpts')).each(function(){ var hiddenOpt=this; var positioned=false; $(src).find('option').each(function(i){ if((sortBy=='value' && $(this).attr('value')*1 > $(hiddenOpt).attr('value')) || (sortBy=='label' && $(this).text() > $(hiddenOpt).text()) ){ $(this).before(hiddenOpt); positioned=true; //break return false; } }); //else append if(!positioned){ $(src).append(hiddenOpt); } }); //clean the hidden list $(src).data('hiddenOpts',[]); //apply the filter and remove options if( typeof filter=='function'){ $(src).find('option').filter(filter).each(function(){ $(src).data('hiddenOpts').push($(this).remove()); }); } } function HideG(xname){ selectOptionFilter($('#sorty'),function(){ return ( $(this).text().indexOf(xname) > -1); },'value'); } function ShowAll(){ selectOptionFilter($('#sorty'),function(){ return false;},'value'); } 

You can pass a more sophisticated filter function to remove the necessary parameters.

Working demo

Answer 4

Today I had the same problem. Without removing unwanted parameters, you will not get the expected result. But the problem is that you need to remember these parameters if you want to display them later.

My solution is very simple and works in all major browsers:

 function filterList(oList, rxSearch) { // Create backup of the old option list (only once) if(typeof(oList.tagOptions) === "undefined") { // Save current options oList.tagOptions = [ ]; // Generate a dynamic property for this DOM object for(var i = 0; i < oList.options.length; ++i) oList.tagOptions.push(oList.options[i]); } // Clear the current option list while(oList.options.length) oList.options.remove(0); // Add only those options which match the regular expression for(var i = 0; i < oList.tagOptions.length; ++i) { if(rxSearch.test(oList.tagOptions[i].text)) oList.options.add(oList.tagOptions[i]); } } 

The trick is that option elements will be copied to the dynamically created tagOptions property on first launch. Since links (in tags) will be stored in these DOM methods, they will not be released. In addition, you do not need global variables for this. Later, visible parameters (oList.options) will be cleared and only those options that match the search query will be added.

Using the following HTML code:

 <select id="myList" size="10"> <option>apple</option> <option>advocado</option> <option>banana</option> <option>coconut</option> </select> 

You would call it this way:

 filterList(document.getElementById("myList"), /^a/i); // Display only those elements, which start with an a alert("Display all with a"); filterList(document.getElementById("myList"), /^b/i); // Display only those elements, which start with an b alert("Display all with b"); filterList(document.getElementById("myList"), /^/i); // Display only those elements, which start with an c alert("Display all"); 

I tested this with Firefox, Internet Explorer 11, Chrome, and Opera. It works great for my purposes.

 function filterList(oList, rxSearch) { // Create backup of the old option list (only once) if(typeof(oList.tagOptions) === "undefined") { // Save current options oList.tagOptions = [ ]; // Generate a dynamic property for this DOM object for(var i = 0; i < oList.options.length; ++i) oList.tagOptions.push(oList.options[i]); } // Clear the current option list while(oList.options.length) oList.options.remove(0); // Add only those options which match the regular expression for(var i = 0; i < oList.tagOptions.length; ++i) { if(rxSearch.test(oList.tagOptions[i].text)) oList.options.add(oList.tagOptions[i]); } } filterList(document.getElementById("myList"), /^a/i); // Display only those elements, which start with an a alert("Display all with a"); filterList(document.getElementById("myList"), /^b/i); // Display only those elements, which start with an b alert("Display all with b"); filterList(document.getElementById("myList"), /^/i); // Display only those elements, which start with an c alert("Display all"); 

 <select id="myList" size="10"> <option>apple</option> <option>advocado</option> <option>banana</option> <option>coconut</option> </select> 

Answer 5

 Display: none will not work foe IE11 I had same issue for search in select option What I did is disabled the un matched options and the hide them. After this I have sorted the options to show only enabled options on top. The code I have written is pasted below - please try to understand the logic I hope it will work 

to disable parameters use

  $("#addselect option")attr('disabled', 'disabled').hide and to again enable it use $("#addselect option").removeAttr('disabled').show(); sort by disabled options. $("#addselect option").each(function (i, val) { if ($(this)[i].disabled) { moveDown("selectId"); } else { moveUp("selectId"); } } function moveUp(selectId) { var selectList = document.getElementById(selectId); var selectOptions = selectList.getElementsByTagName('option'); for (var i = 1; i < selectOptions.length; i++) { var opt = selectOptions[i]; if (!opt.disabled) { selectList.removeChild(opt); selectList.insertBefore(opt, selectOptions[i - 1]); } } } function moveDown(selectId) { var selectList = document.getElementById(selectId); var selectOptions = selectList.getElementsByTagName('option'); for (var i = selectOptions.length - 2; i >= 0; i--) { var opt = selectOptions[i]; if (opt.disabled) { var nextOpt = selectOptions[i + 1]; opt = selectList.removeChild(opt); nextOpt = selectList.replaceChild(opt, nextOpt); selectList.insertBefore(nextOpt, opt); } } }