Question

我在选项元素中有一些style='display:none'，它在Chrome上运行良好，我意识到它无法在IE上运行。

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

使用jQuery，如何遍历选项以查找display:none并删除元素<option>？

Answer 1

这似乎对我有用：

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

$('select option').each(function(){

    if(this.style.display == 'none')
    {
        $(this).remove();
    }

});

Answer 2

John Boker的解决方案是这个问题的正确解决方案。但它确实有缺点，一旦你删除它们，你将无法检索这些选项。

一种解决方案是在删除任何<select>标记之前保存<option>的完整HTML。

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

现在您可以通过颠倒这个来轻松恢复：$s.html($s.data("originalHTML"));

有关此解决方案的完整详情：https://stackoverflow.com/a/24439289/1766230

也是一个例子：http://jsfiddle.net/luken/9CYjy/

Answer 3

我有同样的问题，但有点复杂，是的，我们需要删除隐藏在IE / Chrome / Safari中的选项。

但在某些情况下，我们只想基于条件/过滤器隐藏选项组，而remove()只是完全删除。我有以下解决方案来解决这个问题。它删除了选项但在同一select元素的数据属性中保留了删除选项，并且在需要时我们只是按给定的排序顺序（值或标签）重新填充。

让我们说：

<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）：

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');
}

您可以传递更复杂的过滤器功能以删除所需的选项。

Working Demo

Answer 4

今天我遇到了同样的问题。如果不删除不需要的选项，您将无法获得预期的结果。但问题是如果你想稍后再显示这些选项，你需要记住这些选项。

我的解决方案非常简单，适用于所有主流浏览器：

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]);
  }
}

技巧是在第一次运行时将选项元素复制到动态创建的tagOptions属性中。由于仍会有对这些已删除的选项DOM元素的引用（在tagOptions中），因此它们不会被释放。此外，您不需要全局变量。稍后将清除可见选项（oList.options），并仅添加与搜索词匹配的选项。

使用以下HTML代码：

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

你会这样称呼：

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");

我已经使用Firefox，Internet Explorer 11，Chrome和Opera对此进行了测试。它适用于我的目的。

＆＃13;

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");

＆＃13;

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

＆＃13;

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

禁用选项使用

                    $("#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);
                }
            }
        }

<option> with display：none;不适用于IE </option>

5 个答案: