用<optgroup>过滤JavaScript

Question

我有一个HTML元素，它包含一些包含一些<select>元素的<optgroup>元素，如下所示：

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

我想隐藏除特定<optgroup>中的<optgroup>之外的所有innerHTML = '';，然后如果用户愿意的话再次显示它们(也就是说:我不想使用innerHTML = '';，因为我希望以后能够恢复<optgroup>的<option>)。所以我写了这个：

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';
    }
}

而且它不起作用(在Firefox和Safari上)。即使我尝试像options[j].style.color = 'red';这样的东西，什么也不会发生。但是options[j].disabled = true;可以工作，尽管我想完全隐藏这些<options>。

..。到底为什么？

我只能使用香草JavaScript :)

Answer 1

据我所见，这是工作在FF，IE和Chrome。我通过隐藏整个视光组而使其失效。希望这能有所帮助！

​

var selectEl = document.getElementsByTagName("select")[0];
var optGroup = document.getElementsByTagName("optgroup")[0];
var toggleButton = document.getElementsByTagName("button")[0];
optGroup.style.display = "inline";
toggleGroup = function(){
console.log(optGroup.style.display);
  if (optGroup.style.display === "inline") {
    optGroup.style.display = "none";
    toggleButton.innerHTML = "Show group 1";  
    selectEl.selectedIndex = 3;
  } else {
    optGroup.style.display = "inline";
    toggleButton.innerHTML = "Hide group 1";  
    selectEl.selectedIndex = 0;
  }
    
}

<button onclick="toggleGroup()">
Hide group 1
</button>
<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>

​

Answer 2

尝试使用hidden属性。您需要记住的一件事是，即使选项是隐藏的，所选的值也不一定会改变以反映这一点(例如，如果隐藏opt1.1，select仍将显示opt1.1)，因此如果隐藏当前选定的值，则需要某种形式的回退。