select 元素是前端开发中常用的表单元素之一，它可以让用户选择一个或多个选项。通常情况下，我们使用 option 的 value 属性来获取被选中选项的值。但是，有时候我们需要根据显示文本来设置 select 元素的 selectedIndex。
获取 select 元素的所有选项
在设置 select 元素的 selectedIndex 前，我们需要先获取这个元素的所有选项。我们可以使用 querySelectorAll 方法和 CSS 选择器来获取：
const options = document.querySelectorAll('select option');这样就可以得到一个 NodeList 对象，其中包含了 select 元素的所有 option 子元素。
遍历选项并匹配显示文本
接下来，我们需要遍历所有选项，并找到与目标显示文本匹配的选项。这里提供了两种方法：
方法一：使用 for 循环遍历每个选项
-- -------------------- ---- -------
-------- --------------------------------- ----- -
----- ------- - ----------------------
--- ---- - - -- - - --------------- ---- -
-- ---------------- --- ----- -
--------------------------- - --
------
-
-
-这个函数接收两个参数：一个 select 元素和一个目标显示文本。通过遍历每个选项，如果找到了与目标文本相同的选项，则将其 selectedIndex 设为当前循环索引 i。需要注意的是，如果找到了匹配选项，循环应该及时终止，否则可能会导致 selectedIndex 被重复设置。
方法二：使用 Array.prototype.find 简化代码
function selectOptionByText(selectElement, text) {
const options = Array.from(selectElement.options);
const selectedItem = options.find(option => option.text === text);
if (selectedItem) selectElement.selectedIndex = options.indexOf(selectedItem);
}这个函数也是接收两个参数：一个 select 元素和一个目标显示文本。首先，我们将 NodeList 对象转换成数组，并使用 find 方法来查找与目标文本相同的选项。如果找到了匹配选项，就将其索引设置为 selectedIndex。
需要注意的是，由于 find 方法返回的是符合条件的第一个元素，因此这里可能与目标显示文本相同的选项不止一个，但只有第一个匹配的选项会被选择。
示例代码
下面是一个完整的示例代码，展示了如何根据显示文本设置 select 元素的 selectedIndex：
-- -------------------- ---- ------- ------- -------------- ------- ------------------------ ------- ------------------------- ------- ------------------------- --------- -------- -------- --------------------------------- ----- - ----- ------- - ---------------------------------- ----- ------------ - ------------------- -- ----------- --- ------ -- -------------- --------------------------- - ------------------------------ - ----- -------- - ------------------------------------ ---------------------------- ---------- -- ------ ------ ---------
这个示例展示了如何根据显示文本设置选中项为 "Banana"。你可以修改 select 元素和目标文本，以适应自己的需求。
结论
在前端开发中，我们经常需要操作表单元素，其中 select 元素是很重要的一种。本文介绍了如何通过显示文本来设置 select 元素的 selectedIndex。我们可以先获取所有选项，然后遍历它们并查找与目标文本相同的选项。这种方法可以让我们更加灵活地处理 select 元素，并增强用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26952