JavaScript: 根据选项文本设置下拉列表选中项

下拉列表是 Web 界面中常见的控件，用户可以从中选择一个或多个选项。当需要在页面加载时自动选中某个选项时，我们可以使用 JavaScript 来实现。

获取下拉列表元素

首先，我们需要获取 HTML 页面中的下拉列表元素。有以下两种方式：

方式一：通过 ID 获取

通过给下拉列表元素设置 ID 属性，我们可以使用 document.getElementById() 方法来获取该元素。示例代码如下：

<select id="my-select">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
  <option value="3">选项 3</option>
</select>

const selectElement = document.getElementById('my-select');

方式二：通过查询选择器获取

如果下拉列表元素没有 ID 属性，我们也可以使用 CSS 查询选择器来获取该元素。示例代码如下：

<select class="my-select">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
  <option value="3">选项 3</option>
</select>

const selectElement = document.querySelector('.my-select');

设置选中项

要根据选项文本设置下拉列表的选中项，我们需要遍历所有选项，并找到与目标文本匹配的选项。一旦找到匹配的选项，我们就可以将其设置为选中状态。

以下是示例代码：

-- -------------------- ---- -------
-------- ----------------------------------------- ----------- -
  ----- ------- - ----------------------
  --- ---- - - -- - - --------------- ---- -
    -- ---------------- --- ----------- -
      ------------------- - -----
      ------
    -
  -
-

该函数接受两个参数：下拉列表元素和目标选项文本。它遍历所有选项，并在找到与目标文本匹配的选项时将其设置为选中状态。如果没有找到匹配的选项，该函数不会对下拉列表进行任何更改。

以下是如何使用该函数的示例代码：

<select id="my-select">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
  <option value="3">选项 3</option>
</select>

<button onclick="setSelectValueByOptionText(document.getElementById('my-select'), '选项 2')">设置选中项为“选项 2”</button>

当用户点击按钮时，setSelectValueByOptionText() 函数会将下拉列表的选中项设置为“选项 2”。

总结

本文介绍了如何使用 JavaScript 根据选项文本设置下拉列表的选中项。我们首先要获取下拉列表元素，然后遍历所有选项并找到与目标文本匹配的选项。最后，我们将该选项设置为选中状态。

这是一个基础但实用的技能，在前端开发中会经常用到。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28930