过滤HTML<；optgroup>；使用JavaScript

我有一个HTML

元素，其中包含一些

元素，其中包含一些

元素，如下所示：

<select>
  <optgroup label="label1">Label 1
    <option>opt1.1</option>
    <option>opt1.2</option>
    <option>opt1.3</option>
  </optgroup>
  <optgroup label="label2">Label 2
    <option>opt2.1</option>
    <option>opt2.2</option>
  </optgroup>
  ...
</select>

而且它不工作（在Firefox和Safari上）。即使我尝试像

options[j]这样的东西，style.color='red'什么也没发生。但是
options[j].disabled=true
，但code>仍然有效

。。。究竟为什么

另外，我只能使用香草JavaScript:）
尝试使用
隐藏属性。您需要记住的一件事是，即使该选项被隐藏，所选值也不一定会改变以反映这一点（例如，如果您隐藏opt1.1，则所选值仍将显示opt1.1），因此，如果您隐藏当前所选值，您将需要某种回退。
从我看到的情况来看，这在FF、IE和Chrome中起作用。我通过隐藏整个optgroup来禁用它。希望这有帮助


var selectEl=document.getElementsByTagName（“选择”）[0]；
var optGroup=document.getElementsByTagName（“optGroup”）[0]；
var-toggleButton=document.getElementsByTagName（“按钮”）[0]；
optGroup.style.display=“inline”；
toggleGroup=函数（）{
log（optGroup.style.display）；
if（optGroup.style.display==“inline”）{
optGroup.style.display=“无”；
toggleButton.innerHTML=“显示组1”；
selectEl.selectedIndex=3；
}否则{
optGroup.style.display=“inline”；
toggleButton.innerHTML=“隐藏组1”；
selectEl.selectedIndex=0；
}
}

隐藏组1
标签1
opt1.1
opt1.2
opt1.3
标签2
opt2.1
opt2.2
许多浏览器都禁止隐藏选择选项元素。有一些不同的解决方案。你是对的，这可能就是问题所在。所以Safari显然可以防止隐藏选项元素。谢谢你的回答。显然，Safari阻止隐藏选项元素，因此解决此问题的唯一方法是使用@shipshape注释中提供的链接。
var groups = document.getElementsByTagName('optgroup');
for (var i = 0; i < groups.length; i++) {
    if (groups[i].label != str) {
        var options = groups[i].childNodes;
        for (var j = 0; j < options.length; j++)
            options[j].style.display = 'none';
    }
}