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

最新推荐文章于 2024-04-13 22:06:35 发布

feng_cs

最新推荐文章于 2024-04-13 22:06:35 发布

阅读量2.4w

点赞数 1

分类专栏： HTML_DOM_JS 文章标签： html javascript button

本文链接：https://blog.csdn.net/feng_cs/article/details/3115974

版权

HTML_DOM_JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下拉列表框的HTML标记:
<select id = "sel"></selcet>
这样一个下拉列表框要通过JavaScript控制其中数据项的添加。
实现添加的JS代码：
(1)
1. var selObj = document.getElementById("sel");
通过这种方式获取页面上的select下拉列表对象。
(2)
1. var Option = 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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2. <html>
3. <head>
4. <title>MyHtml.html</title>
5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
7. <script type="text/javascript">
8. function add() {
9. var selObj = document.getElementById("sel");
10. var valObj = document.getElementById("val");
11. var texObj = document.getElementById("tex");
13. // 关键是这几句
14. var Option = 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. <select id="sel"></select>
29. <br>
30. value: <input type="text" id="val">
31. <br>
32. text :<input type="text" id="tex">
33. <br><br>
35. <input type="button" value="add" onclick="add()">
37. </body>
38. </html>
(2) 程序运行截图：

   1) 程序初始运行界面：


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

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

feng_cs

关注

1
点赞
踩
5

收藏

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

下拉列表框的HTML标记:这样一个下拉列表框要通过JavaScript控制其中数据项的添加。实现添加的JS代码：(1) var selObj = document.getElementById("sel"); 通过这种方式获取页面上的select下拉列表对象。(2) var Option = document.createElement("OPTION"); 创建option对象。(3
复制链接

扫一扫