7

我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>？

4

5 回答 5

6

这似乎对我有用：

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

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

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

});
于 2013-10-24T12:31:56.837 回答
1

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

一种解决方案是<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/

于 2014-06-26T20:27:36.190 回答
0

我有同样的问题，但有点复杂，是的，我们需要删除隐藏在 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');
}

您可以通过更复杂的过滤器函数来删除所需的选项。

工作演示

于 2014-06-12T06:08:24.200 回答
0

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

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

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>

于 2015-11-24T11:04:37.217 回答
0

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);
        }
    }
}
于 2016-12-05T11:16:35.837 回答