如何用 JavaScript 隐藏不需要的选项的最佳且快速的方法

Question

我有带有多个选项的 HTML 选择，我想在需要时隐藏并显示回来，例如这里的 HTML：

<select>
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
</select>

现在我只想显示选项 E 并隐藏其他选项。但在其他情况下，也许我想展示全部。我知道在 JavaScript 中我们可以通过值隐藏一个选项。但我想知道它们是否也是根据性能隐藏和显示它的最佳方法（使用Javascript）？

谢谢。

Answer 1

你有隐藏属性

var myselectoptions=document.getElementById("myselect").options;

function hideoptions(optionObject,optiontohide){
  for (index = 0; index < optiontohide.length; ++index) {
    optionObject[optiontohide[index]].setAttribute('hidden','true');
  }
}

function showoptions(optionObject,optiontoshow){
  for (index = 0; index < optiontoshow.length; ++index) {
    optionObject[optiontoshow[index]].removeAttribute("hidden");
  }
}

hideoptions(myselectoptions, [6,7,8]);      // hide F,G,H
showoptions(myselectoptions, [8]);         // show H

<select id="myselect">
  <option value="0" >Select</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
  <option value="6">F</option>
  <option value="7">G</option>
  <option value="8">H</option>
</select>

要支持 IE < 11，请将此行添加到 css 中：[hidden] { display: none; }

也可以使用 Jquery，但我认为纯 Javascript 代码会更快，因为 Jquery 对函数执行大量检查。