js设置select的option选中|极客笔记

js设置select的option选中

在前端开发中，经常会遇到需要通过 JavaScript 动态设置 select 元素的选中项的需求。本文将详细介绍如何使用 JavaScript 来设置 select 元素的选中项，同时提供一些示例代码方便理解。

获取select元素并设置选中项

首先，我们需要获取到对应的 select 元素，并且找到需要设置为选中项的 option 元素。通过 JavaScript 可以很轻松地实现这一步骤。

获取select元素

我们可以使用 document.getElementById 或者 document.querySelector 方法来获取到 select 元素，具体代码如下：

// 通过id获取select元素
const selectElement = document.getElementById("mySelect");

// 或者通过选择器获取select元素
const selectElement = document.querySelector("#mySelect");

设置选中项

一旦获取到了 select 元素，我们需要找到需要设置为选中项的 option 元素。假设我们想要将第二个 option 元素设置为选中项，可以通过设置该 option 的 selected 属性为 true 来实现：

// 获取select元素
const selectElement = document.getElementById("mySelect");

// 设置第二个option为选中项
selectElement.options[1].selected = true;

示例代码及运行结果

下面我们来看一个完整的示例代码，展示如何通过 JavaScript 设置 select 元素的选中项，并输出：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Selected Option in Select Element</title>
</head>
<body>
<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<button onclick="setSelectedOption()">Set Option 2 as Selected</button>

<script>
function setSelectedOption() {
  const selectElement = document.getElementById("mySelect");
  selectElement.options[1].selected = true;
}
</script>
</body>
</html>

在上面的示例代码中，我们创建了一个 select 元素，其中包含三个 option 元素。然后提供了一个按钮，当点击按钮时，会将第二个 option 元素设置为选中项。接下来我们来看一下运行结果。

当我们点击按钮后，Option 2 将会被设置为选中项，效果如下所示：

[示例运行结果截图]