Question

我需要使用Javascript从多选框中隐藏某些选项。我不能得到jQuery，我不被允许。

我还有一个下拉框，我正在调用一个js函数，该函数将在更改值时调用。 js函数将控制另一个多选项框的选项，我需要根据下拉框值隐藏（不删除）选项。

任何简单的js功能？

编辑：试图

fastInternet.options[i].style.display = 'none';
fastInternet.options[i].style.visibility = 'hidden';

无效:(

Answer 1

已编辑：

新建议：

如何制作disable

fastInternet.options[i].setAttribute("disabled", "disabled")

然后使用以下CSS隐藏它：

select option[disabled] {
    display: none; /* worked in firefox*/
    visibility: hidden; /* worked in chrome*/
}

SEE DEMO

这可能会有所帮助！

OLD建议：

尝试使用

 fastInternet.remove(options[i])

Answer 2

添加display:none为我工作。但是我通过css做到了。

建立一个例子。检查here

没有安装chrome来测试。但我想visibility:hidden应该有用。

Answer 3

我尝试使用你的jsFiddle链接但是其中的一些东西阻止了该方法正常工作。

我做了一些修改，它运作得很好：

HTML：

<select id="option_two" multiple>        
  <option value="VOIP">VOIP</option>         
  <option value="BDS">BDS</option>          
  <option value="DMW">DMW</option>          
  <option value="IDTV">IDTV</option>          
  <option value="P3TR">P3TR</option> 
</select>

使用Javascript：

 var fastInternet = document.getElementById('option_two');

 for ( var i = 0; i < fastInternet.options.length; i++) {
     var value = fastInternet.options[i].value;

     if(value == 'IDTV' || value == 'P3TR'){
        fastInternet.options[i].style.visibility = 'hidden';
     }
 }

在JsFiddle中，确保框架设置为onLoad和No-Library（纯JS）在chrome中它起作用了。但我在IE中遇到了一些问题：/

隐藏多个选择框中的选项

3 个答案: