【问题标题】：How to remove/hide select options from select-list如何从选择列表中删除/隐藏选择选项
【发布时间】：2013-07-13 05:19:20
【问题描述】：

我有一个这样的选择列表：

<select id="selectlist" name="selectproduct" >
    <option value=""> --- Select product  --- </option>
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
    <option value="4">Product 4</option>
</select>

很遗憾，我无法编辑它。有没有什么方法可以让我默认隐藏“产品 4”选项？我正在尝试使用 CSS，但它不适用于 IE。

【问题讨论】：

stackoverflow.com/a/24516786

标签： javascript select hide option

【解决方案1】：

<option value="4" style="display:none">Product 4</option>

默认隐藏第四个选项。

【讨论】：

[在此处插入编程模因]

【解决方案2】：

如果您想从选择列表中删除某些选项，您可以使用以下代码：

<script type="text/javascript">
    $(window).bind("load", function() {    
        $('#select_list_id option[value="AB"],option[value="SK"]').remove();
    });
</script>

【讨论】：

【解决方案3】：

要隐藏它，用 span 标签包裹它。

$( "#selectlist option[value=4]" ).wrap( "<span>" );

要显示它，如果有 span 标签，请打开它。

if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
    $( "#selectlist option[value=4]" ).unwrap();
}

【讨论】：

那会创建非法的 HTML
我不认为“非法”和“解决方案”有任何关系，否则世界可能看起来会有很大不同。但这可能是一种更简单的展开方式： $( "#selectlist span > option[value=4]" ).unwrap();

【解决方案4】：

为了节省您的时间，请阅读以下答案。

好的，我搜索了几个小时，我注意到对于所有人来说，NO WORKING WAY 可以“隐藏”（我的意思是使选项暂时从下拉列表中消失）浏览器，例如将可见性设置为隐藏或 style="display: none"。

我的最终方法是： 1. 创建一个数组来存储下拉列表的所有选项。 2. 使用一种方法，根据您想要显示的内容动态更新下拉列表。

就是这样，如果你想使用下拉列表而不使用任何库

【讨论】：

【解决方案5】：

使用 java 脚本将子级附加到选项列表下方。

`var option = document.createElement("option");
 option.text = "All Users";
 option.value = "all_user";
 var select = document.getElementById("log_user_type");
 select.appendChild(option);`

【讨论】：

【解决方案6】：

您可以在脚本中使用以下行包含隐藏选项。

    $("#selectlist option[value='4']").hide();

如果您想再次显示此选项，请使用以下行。

   $("#selectlist option[value='4']").show();

【讨论】：

【解决方案7】：

您可以通过将选项移动到隐藏的选择元素或缓存的文档片段来“隐藏”该选项，然后在您想要显示它时将其移回：

var selectTool = (function() {
  var frag = document.createDocumentFragment();
  return {
    hideOpt: function (selectId, optIndex) {
      var sel = document.getElementById(selectId);
      var opt = sel && sel[optIndex];
      console.log(opt);

      if (opt) {
        frag.appendChild(opt);
      }
    },

    showOpt: function (selectId) {
      var sel = document.getElementById(selectId);
      var opt = frag.firstChild;
      if (sel && opt) {
        sel.appendChild(opt);
      }
    }
  }
}());

然后您可以隐藏第四个选项，例如：

<input type="button" value="Hide option" onclick="
  selectTool.hideOpt('selectlist',4);
">

并再次使用：

<input type="button" value="Show option" onclick="
  selectTool.showOpt('selectlist');
">

当然都是玩代码，但你应该得到一些想法。如果您想存储许多选项，则需要一种引用它们的方法，因此可以将它们存储在具有某种形式的引用方案的对象中。

【讨论】：

?我只需要隐藏，我不想通过点击任何地方来显示选项
很好，上面“隐藏”了这个选项。如果您不需要再次显示，只需将其删除即可。

【解决方案8】：

我想你也在使用 JQuery。

$("#selectlist option[value='option4']").remove();

【讨论】：

没有错误，它只是显示没有加载任何javascript脚本的选项
你搞砸了。尝试使用内联脚本来代替。这是方法。它应该可以工作。

【解决方案9】：

查看此链接

http://jsfiddle.net/DKKMN/

<select id="selectlist" name="selectproduct" >
 <option value=""> --- Select product  --- </option>
 <option value="1">Product 1</option>
 <option value="2">Product 2</option>
 <option value="3">Product 3</option>
 <option value="4" id="i">Product 4</option>
</select>


#i{display:none;}

创建一个 id 并在样式上使其不可见

【讨论】：

此方案不隐藏IE11中的选项。
是的，总是问自己“这行得通，但是当 Microsoft 时会发生什么”

【解决方案10】：

IE不支持使用css隐藏选项，需要自行更新options列表。

试试类似的东西

$('#selectlist option[value=4]').remove();

演示：Fiddle

或者如果您想稍后启用它

var sel = $('#selectlist');
var opts = sel.find('option');

$(':checkbox').click(function(){
    sel.empty().append(this.checked ? opts : opts.filter('[value!=4]'));
}).click()

演示：Fiddle

【讨论】：

不知道为什么，但是它不起作用...我正在使用JQuery no.conflict 方法，但是没有...
@user2132234 如果您使用的是 noConflict 则使用 $ 代替 jQuery
我正在使用 var $nol = jQuery.noConflict();并在您的函数中将“$”更改为“$nol”，这是正确的方法吗？
@user2132234 是的
这是网址：provagas1860.opentur.it/destinazioni 选择列表在右侧！

【解决方案11】：

尝试使用 disabled 属性禁用该选项。

<select id="selectlist" name="selectproduct" >
 <option value=""> --- Select product  --- </option>
 <option value="1">Product 1</option>
 <option value="2">Product 2</option>
 <option value="3">Product 3</option>
 <option value="4" disabled="disabled">Product 4</option>
</select>

查看demo

【讨论】：

禁用一个选项并不会隐藏它，它只是使它无法选择。而且 disabled 属性没有值。