optgroup 和 option 元素常用于 HTML 表单中的下拉列表中，但是有时候我们需要隐藏一些选项或者整个组，本文将介绍两种方法来实现这个目的。
方法一：使用 CSS 隐藏
我们可以通过 CSS 来改变元素的显示状态，例如将 display 属性设置为 none 就可以隐藏元素。对于 optgroup 和 option 元素，我们可以将它们的 display 属性设置为 none 来隐藏它们。
-- ----- ------ -- -- ------ - -------- ----- - -- ----- -------- ---- ------ -- -- --------------------------- ------ - -------- ----- -
在上述代码中，第一个规则选择器针对所有 option 元素，将它们的 display 属性设置为 none，从而隐藏了这些元素。第二个规则选择器针对带有 label 属性且值为 "GroupName" 的 optgroup 元素下的 option 元素，同样将它们的 display 属性设置为 none，从而只隐藏了该组下的元素。
这种方法简单易行，但是有局限性，比如无法控制 optgroup 元素被隐藏后，其下的 option 元素如何表现，例如是否应该在下拉菜单中保留占位符等。
方法二：使用 JavaScript 隐藏
我们可以通过 JavaScript 来控制元素的显示状态，例如将元素的 style.display 属性设置为 none 就可以隐藏元素。对于 optgroup 和 option 元素，我们可以通过遍历它们的子元素来判断是否需要隐藏。
------- --------------
--------- ---------------
------- ---------------- ----------
------- ---------------- ----------
-----------
--------- ---------------
------- ---------------- ----------
------- ---------------- ----------
-----------
---------
--------
-- ----- ------ --
--- ------- - ----------------------------------------
--- ---- - - -- - - --------------- ---- -
------------------------ - -------
-
-- ---- -------- ---- ------ --
--- ----- - ---------------------------------------------------
--- ------- - -------------------------------------
--- ---- - - -- - - --------------- ---- -
------------------------ - -------
-
---------在上述代码中，第一个脚本段选择所有 option 元素，并将它们的 style.display 属性设置为 none，从而隐藏了这些元素。第二个脚本段首先选择带有 label 属性且值为 "Group1" 的 optgroup 元素，然后选择该组下的 option 元素并将它们的 style.display 属性设置为 none，从而只隐藏了该组下的元素。
这种方法比较灵活，可以控制元素的显示状态，但是需要 JavaScript 支持。
总结
本文介绍了两种方法来隐藏 optgroup 和 option 元素，分别使用 CSS 和 JavaScript。CSS 简单易行，但有局限性；JavaScript 比较灵活，但需要浏览器支持。在实际开发中，我们可以根据具体情况选择合适的方法来实现隐藏 optgroup 和 option 元素的目的。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29770