JavaScript实现向select下拉框中添加和删除元素的方法

JavaScript提供了很多方法来操控DOM元素，实现向select下拉框中添加和删除元素的方法也非常简单。

向select下拉框中添加元素

我们可以通过JavaScript中的createElement()方法和appendChild()方法来向select下拉框中添加元素。

步骤

1. 获取select元素

let select = document.getElementById("selectId");

1. 创建option元素

let option = document.createElement("option");

1. 设置option元素的属性和内容

option.value = "optionValue";
option.text = "Option Text";

1. 将option元素添加到select元素中

select.appendChild(option);

示例

<select id="selectId"></select>

<button onclick="addOption()">Add Option</button>

<script>
function addOption() {
  let select = document.getElementById("selectId");

  let option = document.createElement("option");
  option.value = "1";
  option.text = "Option 1";

  select.appendChild(option);
}
</script>

当点击“Add Option”按钮时，页面中的select下拉框就会添加一个新的选项。

删除select下拉框中的元素

我们可以通过JavaScript中的removeChild()方法来删除select下拉框中的元素。

步骤

1. 获取select元素

let select = document.getElementById("selectId");

1. 获取要删除的option元素

let option = document.getElementById("optionId");

1. 将要删除的option元素从select元素中移除

select.removeChild(option);

示例

<select id="selectId">
  <option id="option1" value="1">Option 1</option>
  <option id="option2" value="2">Option 2</option>
  <option id="option3" value="3">Option 3</option>
</select>

<button onclick="removeOption()">Remove Option 2</button>

<script>
function removeOption() {
  let select = document.getElementById("selectId");
  let option = document.getElementById("option2");
  select.removeChild(option);
}
</script>

当点击“Remove Option 2”按钮时，页面中的select下拉框就会删除名为“Option 2”的选项。