js实现select的添加和删除的完整代码
时间: 2024-02-26 21:58:48 浏览: 58
以下是一个完整的示例代码,演示如何使用JavaScript来添加和删除select选项:
```html
<!DOCTYPE html>
<html>
<head>
<title>Select操作示例</title>
</head>
<body>
<!-- 创建select元素 -->
<select id="mySelect">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
<br><br>
<!-- 添加和删除按钮 -->
<button onclick="addOption()">添加选项</button>
<button onclick="removeOption()">删除选项</button>
<script>
// 添加选项
function addOption() {
// 获取select元素
var select = document.getElementById("mySelect");
// 创建新的option元素
var option = document.createElement("option");
option.text = "新选项";
option.value = "newOption";
// 将新的option添加到select中
select.add(option);
}
// 删除选项
function removeOption() {
// 获取select元素
var select = document.getElementById("mySelect");
// 获取要删除的option的索引
var index = select.selectedIndex;
// 删除选中的option
select.remove(index);
}
</script>
</body>
</html>
```
在浏览器中打开该HTML文件,点击“添加选项”按钮可以添加一个名为“新选项”的选项,点击“删除选项”按钮可以删除当前选中的选项。
阅读全文