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

Question

在我的代码中，我利用禁用和启用样式标签的功能来隐藏/显示 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';

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

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

Answer 1

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

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

• Chrome、Firefox 和 Edge 将显示第一个元素，即使它有 display: none。
• Chrome 和 Firefox 会 react 性地隐藏第一个元素，如果要隐藏它，当从下拉列表中选择另一个选项时。
• 如果您将注意力集中在选择元素上，Firefox 将允许您选择隐藏的值，然后按向上和向下箭头循环浏览选项。

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