js实现下拉表单添加到文本框并弹出的添加与删除的完整代码
时间: 2023-12-17 15:05:37 浏览: 37
以下是一个简单的示例代码,通过 JavaScript 实现下拉框选项的添加和删除,并将选中的选项添加到文本框中并弹出。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉框添加删除示例</title>
</head>
<body>
<select id="mySelect">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>
<button onclick="addOption()">添加选项</button>
<button onclick="removeOption()">删除选项</button>
<br><br>
<input type="text" id="myInput">
<button onclick="showInput()">确定</button>
<script>
function addOption() {
var select = document.getElementById("mySelect");
var option = prompt("请输入要添加的选项", "");
if (option != null) {
var newOption = document.createElement("option");
newOption.text = option;
newOption.value = option;
select.add(newOption);
}
}
function removeOption() {
var select = document.getElementById("mySelect");
select.remove(select.selectedIndex);
}
function showInput() {
var input = document.getElementById("myInput");
alert(input.value);
}
var select = document.getElementById("mySelect");
select.addEventListener("change", function() {
var input = document.getElementById("myInput");
input.value = select.value;
});
</script>
</body>
</html>
```
该示例中,点击添加选项按钮会弹出一个提示框,输入要添加的选项,点击确定后会将该选项添加到下拉框中。点击删除选项按钮会删除下拉框中选中的选项。在文本框中输入内容后点击确定按钮会弹出一个对话框显示输入的内容。同时,当下拉框中选项发生改变时,会自动将选中的选项的值赋值给文本框。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)