- 下拉列表框的HTML标记:
<select id = "sel"></selcet>
这样一个下拉列表框要通过JavaScript控制其中数据项的添加。 - 实现添加的JS代码:
(1)- var selObj = document.getElementById("sel");
(2)- var Option = document.createElement("OPTION");
(3)- Option.value = "";
- Option.text = "";
至此构造的Option应该是这新的效果:<option value="">***</option>
(4)- selObj.options.add(Option);
这样就能向下拉列表框中添加一项内容了。 - 一个例子
(1) HTML文件代码如下:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>MyHtml.html</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <script type="text/javascript">
- function add() {
- var selObj = document.getElementById("sel");
- var valObj = document.getElementById("val");
- var texObj = document.getElementById("tex");
- // 关键是这几句
- var Option = document.createElement("OPTION");
- Option.value = valObj.value;
- Option.text = texObj.value;
- selObj.options.add(Option);
- }
- </script>
- </head>
- <body>
- <select id="sel"></select>
- <br>
- value: <input type="text" id="val">
- <br>
- text :<input type="text" id="tex">
- <br><br>
- <input type="button" value="add" onclick="add()">
- </body>
- </html>
1) 程序初始运行界面:
2) 输入要添加的下拉列表框中数据项:
3) 添加下拉列表框的选项:
动态添加HTML标记中下拉列表框的处理方法
最新推荐文章于 2024-03-17 20:14:27 发布