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'; } }。所以我写了这个：

options[j].style.color = 'red';

并且它不起作用（在Firefox和Safari上）。即使我尝试options[j].disabled = true;这样的事情也没有任何反应。但<options>有效，但我想完全隐藏那些SwapSpaceSpi。

......为什么在地球上？

P.S。我只能使用vanilla JavaScript：）

Answer 1

从我所看到的，这适用于FF，IE和Chrome。我通过隐藏整个optgroup来禁用。希望这有帮助！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试使用{{1}}属性。您需要记住的一件事是，即使该选项被隐藏，所选的值也不一定会改变以反映该值（例如，如果您隐藏opt1.1，则选择仍将显示opt1.1），因此如果隐藏当前选定的值，则需要某种后备。

使用JavaScript过滤HTML <optgroup>

2 个答案: