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

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会反复隐藏第一项（如果要隐藏）。
• 如果您专注于select元素，Firefox将允许您选择其他隐藏的值，然后按向上和向下箭头循环选项。

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