如何在 Microsoft Edge 的选择语句中临时删除选项？

Question

在我的代码中，我利用禁用和启用样式标签的功能来隐藏/显示 optgroup 标签及其选项标签。但是，当在 Microsoft Edge 中以这种方式隐藏 optgroup 时，它会放置一个空行而不是根本没有行。

一个例子：

<optgroup class="my-option" label="truck">
  <option class="business">Business truck</option>
</optgroup>



<style id="enable_disable">
  .my-option {display: none; visibility:hidden;}
</style>

然后，在我的 javascript 代码中，我以这种方式隐藏 optgroup：

document.getElementById('enable_disable').media = 'all';

为了显示 optgroup，我这样做：

document.getElementById('enable_disable').media = 'disable';

如果我只为“业务”类执行此操作，则会发生同样的事情，除了用户可以选择该选项，他或她只是看不到文本，只是一个空白行。

编辑： Here 是我正在做的一个工作示例。您可以看到它在除 edge 之外的所有浏览器中的行为都相同。

Answer 1

不建议使用 CSS 隐藏 <select> 元素的子元素（至少目前是这样）。所有主要浏览器的结果都会有所不同。如果您想删除一个或一组选项，您应该实际删除它们 使用 JavaScript。

主要浏览器之间的一些不一致：

• Chrome、Firefox 和 Edge 将显示第一项，即使它有 display: none。
• 当从下拉列表中选择另一个选项时，Chrome 和 Firefox 将被动地隐藏第一个项目（如果要隐藏它）。
• 如果您专注于选择元素，Firefox 将允许您选择其他隐藏的值，然后按向上和向下箭头在选项中循环。

如果您保留对已删除元素的引用，moving it around is trivial。