在前端开发中，我们经常需要对网页中的下拉列表进行定制以满足特定需求。有时候我们需要隐藏一些选项，例如禁用某些选项或者根据用户权限来动态显示/隐藏选项。本文将介绍如何使用 JavaScript 在跨浏览器的情况下隐藏 select 元素中的选项。
HTML 结构
首先，我们需要创建一个包含若干选项的 select 元素。以下是一个示例：
------- -------------- ------- ---------------------- ------- ---------------------- ------- ---------------------- ------- ---------------------- ------- ---------------------- ---------
使用 JavaScript 隐藏选项
方法一：设置 option 的 style.display 属性
我们可以通过设置被隐藏选项的 style.display 属性为 "none" 来隐藏它们。以下是一个基础的实现：
----- -------- - ------------------------------------ ----- ------- - ----------------- ------------------------ - ------- -- ------- ------------------------ - ------- -- -------
不过，这种方法存在一些问题：
- 当你再次显示选项时，该选项不会恢复到原始状态，而是保持在之前设置的样式。
- 该方法只能隐藏单个选项，如果我们需要同时隐藏多个选项，则需要再次调用上述代码。
方法二：使用 DOM 中的 removeChild() 方法
为了解决上述问题，我们可以使用 removeChild() 方法将选项从 select 元素中移除。以下是一个示例：
----- -------- - ------------------------------------ ----- ------- - ----------------- --------------------------------- -- ------- --------------------------------- -- -------
使用该方法时需要注意：
- 如果要再次显示选项，我们需要重新创建并添加该选项到 select 元素中。
- 注意移除选项后，select 元素的
options数组长度也发生了变化，因此要确保移除正确的选项。
方法三：使用 jQuery（仅限于使用 jQuery 函数库的情况）
如果你使用 jQuery 函数库，那么可以使用 hide() 方法来隐藏选项。以下是一个示例：
------------ ---------------------- -- ------- ------------ ---------------------- -- -------
该方法的优点在于它更加简洁，但缺点是需要引入 jQuery 函数库，当然这对于已经使用 jQuery 的开发者来说并不是问题。
兼容性
以上三种方法在大部分现代浏览器中都可以正常工作，包括 Chrome、Firefox、Safari 和 Edge。但是在 Internet Explorer 中，第一种方法可能存在兼容性问题，因为 IE9 浏览器不支持 style.display 属性的修改。为了解决这个问题，我们可以使用 setAttribute() 方法来设置选项的样式。
结论
本文介绍了三种方法来隐藏 select 元素中的选项，包括设置 style.display 属性、使用 removeChild() 方法和使用 jQuery 函数库。这些方法在大部分现代浏览器中都可以正常工作，其中第二种方法是最通用的解决方案。如果需要兼容老旧的浏览器（例如 IE9），则应该使用 setAttribute() 方法来修改选项的样式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27187