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

Question

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

一个例子：

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

如果我只为 "business" class 执行此操作，则会发生同样的事情，除了用户可以 select 该选项，他或她只是看不到文本，只是一个空行。

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

Answer 1

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

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

Chrome、Firefox 和 Edge 将显示第一项，即使它具有 显示：none.
Chrome，当从下拉列表中 select 编辑另一个选项时，Firefox 将反应性地隐藏第一项（如果要隐藏）。
如果您关注 select 元素，Firefox 将允许您 select 隐藏值，然后按向上和向下箭头循环浏览选项。

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

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

How do I temporarily remove an option in a select statement in Microsoft Edge?

css

optgroup

microsoft-edge