<选项> 带显示：无；在 IE 上不起作用答案

【问题标题】：<option> with display:none; does not work on IE<选项> 带显示：无；在 IE 上不起作用
【发布时间】：2013-11-03 03:45:14
【问题描述】：

我在选项元素中有一些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>？

【问题讨论】：

您缺少末尾的分号 style="display:none;"
你试过用双引号吗？例如，"display:none;"??
@Keith，最后一项不需要，只需要分隔多个项
添加分号和双引号并不能解决 IE 上的问题。就像我说的在 Chrome 上运行良好。
我认为 IE 更可能根本无法识别选项上的“display:none”样式。我认为您将不得不根据需要删除/添加它们

标签： jquery css internet-explorer

【解决方案1】：

Display: none 不适用于 IE11。我在选择选项中搜索时遇到了同样的问题。我所做的是禁用不匹配的选项，然后隐藏它们。在此之后，我对选项进行了排序以仅在顶部显示启用的选项。我写的代码贴在下面 - 请尝试理解我希望它能够工作的逻辑。

要禁用选项，请使用：

$("#addselect option")attr('disabled', 'disabled').hide

再次启用它使用：

$("#addselect option").removeAttr('disabled').show();

按禁用选项排序：

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

【讨论】：

【解决方案2】：

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

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

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 属性中。由于仍然会引用（在 tagOptions 中）这些已删除的选项 DOM 元素，因此它们不会被释放。此外，您不需要全局变量。稍后，可见选项（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 对此进行了测试。它适用于我的目的。

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>

【讨论】：

【解决方案3】：

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

一种解决方案是在删除任何<option> 标记之前保存<select> 的完整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/

【讨论】：

【解决方案4】：

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

但在某些情况下，我们只想隐藏基于标准 /filter 的选项组，而 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

【讨论】：

【解决方案5】：

这似乎对我有用：

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

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

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

});

【讨论】：

删除 ??删除这些选项后如何检索它们？！！！隐藏不行！然后删除它？！
为什么投反对票？该问题询问如何删除选项，而不是隐藏它们。