Javascript 如何从选择列表中删除/隐藏选择选项

我有这样一个选择列表：

<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。

尝试使用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>

---

检查使用css隐藏选项在IE中不受支持，因此您需要更新选项列表本身

试试像这样的东西

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

演示：

或者如果您想稍后启用它

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

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

演示：

查看此链接

---

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

我想您也在使用JQuery

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

---

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

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

---

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

若要隐藏它，请使用span标记将其包裹起来

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

---

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

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

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

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

---

使用java脚本将子项附加到选项列表下面

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

为了节省时间，请阅读以下答案。 好的，我搜索了几个小时，发现没有有效的方法来隐藏我的意思是使选项暂时从所有浏览器的下拉列表中消失，例如将可见性设置为隐藏或style=display:none

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

---

就是这样，如果您想在不使用任何库的情况下使用下拉列表

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

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

---

默认情况下隐藏第四个选项。

禁用选项不会隐藏它，只会使它无法选择。并且禁用的属性没有值。？我只需要隐藏，我不想通过单击任何地方来显示选项。很好，上面隐藏了选项。如果你不需要再次显示它，只需删除它。不知道为什么，但它不起作用。。。我使用的是JQuery no.conflict方法，但是没有…@user2132234如果您使用的是noConflict，那么我使用的是var$nol=JQuery.noConflict；并在函数中用$nol更改$nol，是否正确？@user2132234是的，这是web url：选择列表在右侧！没有错误，它只是简单地显示选项，就像没有加载任何javascript脚本一样。你把事情搞砸了。试着用内嵌脚本来代替。就是这样。它应该会起作用。那会产生非法的HTMLI。我不认为非法和解决方案有任何关系，否则这个世界看起来会有很大的不同。但这可能是一种更简单的展开方式：$selectlist span>option[value=4]。展开；这个解决方案并没有隐藏IE11中的选项。是的，请始终扪心自问，这是可行的，但是当Microsoft[在此处插入编程模因]时会发生什么

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

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

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