下拉列表是 Web 界面中常见的控件，用户可以从中选择一个或多个选项。当需要在页面加载时自动选中某个选项时，我们可以使用 JavaScript 来实现。
获取下拉列表元素
首先，我们需要获取 HTML 页面中的下拉列表元素。有以下两种方式：
方式一：通过 ID 获取
通过给下拉列表元素设置 ID 属性，我们可以使用 document.getElementById() 方法来获取该元素。示例代码如下：
------- --------------- ------- ------------ ---------- ------- ------------ ---------- ------- ------------ ---------- ---------
----- ------------- - -------------------------------------
方式二：通过查询选择器获取
如果下拉列表元素没有 ID 属性，我们也可以使用 CSS 查询选择器来获取该元素。示例代码如下：
------- ------------------ ------- ------------ ---------- ------- ------------ ---------- ------- ------------ ---------- ---------
----- ------------- - -------------------------------------
设置选中项
要根据选项文本设置下拉列表的选中项，我们需要遍历所有选项，并找到与目标文本匹配的选项。一旦找到匹配的选项，我们就可以将其设置为选中状态。
以下是示例代码：
-------- ----------------------------------------- ----------- -
----- ------- - ----------------------
--- ---- - - -- - - --------------- ---- -
-- ---------------- --- ----------- -
------------------- - -----
------
-
-
-该函数接受两个参数：下拉列表元素和目标选项文本。它遍历所有选项，并在找到与目标文本匹配的选项时将其设置为选中状态。如果没有找到匹配的选项，该函数不会对下拉列表进行任何更改。
以下是如何使用该函数的示例代码：
------- --------------- ------- ------------ ---------- ------- ------------ ---------- ------- ------------ ---------- --------- ------- ------------------------------------------------------------------------- --- -------------- -----------
当用户点击按钮时，setSelectValueByOptionText() 函数会将下拉列表的选中项设置为“选项 2”。
总结
本文介绍了如何使用 JavaScript 根据选项文本设置下拉列表的选中项。我们首先要获取下拉列表元素，然后遍历所有选项并找到与目标文本匹配的选项。最后，我们将该选项设置为选中状态。
这是一个基础但实用的技能，在前端开发中会经常用到。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28930