动态添加HTML标记中下拉列表框的处理方法

最新推荐文章于 2021-12-03 00:37:25 发布

iteye_7597

最新推荐文章于 2021-12-03 00:37:25 发布

阅读量295

点赞数

文章标签： HTML JavaScript ViewUI

下拉列表框的HTML标记:
<select id = "sel"></selcet>
这样一个下拉列表框要通过JavaScript控制其中数据项的添加。
实现添加的JS代码：
(1)
1. varselObj=document.getElementById("sel");
通过这种方式获取页面上的select下拉列表对象。
(2)
1. varOption=document.createElement("OPTION");
创建option对象。
(3)
1. Option.value="";
2. Option.text="";
这里对新增加的Option对象进行赋值。
至此构造的Option应该是这新的效果：<option value="">***</option>
(4)
1. selObj.options.add(Option);
添加Option对象到下拉列表框中。

这样就能向下拉列表框中添加一项内容了。
一个例子

(1) HTML文件代码如下：
1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
2. <html>
3. <head>
4. <title>MyHtml.html</title>
5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
7. <scripttype="text/javascript">
8. functionadd(){
9. varselObj=document.getElementById("sel");
10. varvalObj=document.getElementById("val");
11. vartexObj=document.getElementById("tex");
13. //关键是这几句
14. varOption=document.createElement("OPTION");
15. Option.value=valObj.value;
16. Option.text=texObj.value;
18. selObj.options.add(Option);
19. }
21. </script>
23. </head>
25. <body>
27. <selectid="sel"></select>
29. <br>
30. value:<inputtype="text"id="val">
31. <br>
32. text:<inputtype="text"id="tex">
33. <br><br>
35. <inputtype="button"value="add"onclick="add()">
37. </body>
38. </html>
(2) 程序运行截图：

1) 程序初始运行界面：

2) 输入要添加的下拉列表框中数据项：

3) 添加下拉列表框的选项：

iteye_7597

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态添加HTML标记中下拉列表框的处理方法

&lt;script&gt;function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key....
复制链接

扫一扫