javascript - 使用 JavaScript 过滤 HTML <optgroup>

Question

我有一个 HTML <select>包含一些 <optgroup> 的元素元素包含一些 <option>元素，像这样:

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

我想隐藏所有<option>除了特定的 <optgroup> ，然后如果用户愿意，稍后再次显示它们(即:我不想使用 innerHTML = ''; ，因为我希望能够稍后恢复我的 <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>完全是。

... 为什么在地球上？

附言我只能使用 vanilla JavaScript :)

Answer 1

据我所知，这适用于 FF、IE 和 Chrome。我通过隐藏整个 optgroup 来禁用。希望这对您有所帮助!

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>