编写js代码,使用按钮的点击事件为下拉菜单添加文本值1、2、3
时间: 2024-05-15 20:18:09 浏览: 10
当然,我可以为您提供代码示例。以下是由JavaScript编写的HTML代码,它使用按钮的点击事件为下拉菜单添加文本值:
```
<!DOCTYPE html>
<html>
<head>
<title>添加下拉菜单值</title>
</head>
<body>
<p>使用按钮的点击事件为下拉菜单添加文本值:</p>
<select id="mySelect">
<option value=""></option>
</select>
<br><br>
<button onclick="addOption()">添加选项</button>
<script>
function addOption() {
var select = document.getElementById("mySelect");
var option1 = document.createElement("option");
option1.text = "1";
select.add(option1);
var option2 = document.createElement("option");
option2.text = "2";
select.add(option2);
var option3 = document.createElement("option");
option3.text = "3";
select.add(option3);
}
</script>
</body>
</html>
```
您只需将上述代码复制并粘贴到任何文本编辑器中,然后将其保存为HTML文件,然后在浏览器中打开该HTML文件就可以看到下拉菜单。按下“添加选项”按钮即可在下拉菜单中添加文本值1、2、3。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)