如何使用 JavaScript 更改 HTML 选定选项

当我们需要根据用户的选择或其他条件来更改 HTML 表单或下拉菜单（select）的选项时，可以使用 JavaScript 来实现。下面是一些可以帮助你使用 JavaScript 更改 HTML 选定选项的方法和示例代码。

方法一：使用 innerHTML 属性

你可以使用 innerHTML 属性来更改 HTML 元素的内容，包括选项内容。例如，给定一个下拉菜单的 id 为 "mySelect"，可以使用以下代码来更改选项：

// 获取下拉菜单元素
var selectElement = document.getElementById("mySelect");

// 清空所有选项
selectElement.innerHTML = "";

// 添加新选项
selectElement.innerHTML += "<option value='1'>选项1</option>";
selectElement.innerHTML += "<option value='2'>选项2</option>";

这段代码首先获取 mySelect 下拉菜单的元素，然后清空所有选项。然后，通过使用 += 操作符，将新的 option 标签添加到 innerHTML 属性中。

方法二：使用 DOM 操作方法

除了使用 innerHTML 属性，你还可以使用 DOM 操作方法来更改 HTML 选定选项。以下是使用 DOM 方法的示例代码：

// 获取下拉菜单元素
var selectElement = document.getElementById("mySelect");

// 清空所有选项
while (selectElement.firstChild) {
  selectElement.removeChild(selectElement.firstChild);
}

// 创建新的选项
var option1 = document.createElement("option");
option1.value = "1";
option1.text = "选项1";

var option2 = document.createElement("option");
option2.value = "2";
option2.text = "选项2";

// 将新的选项添加到下拉菜单
selectElement.add(option1);
selectElement.add(option2);

在这段代码中，我们首先使用 while 循环来删除 mySelect 下拉菜单的所有子节点。然后，我们通过使用 document.createElement 创建新的 <option> 元素，分别设置 value 和 text 的值。最后，我们使用 add 方法将新的选项添加到下拉菜单中。

无论你选择使用哪种方法，以上代码都可以帮助你更改 HTML 选定选项，可以根据你的具体需求动态地更新选项内容。