首页 > 蚂蚁部落 > 正文

js动态生成select下拉菜单
2017-12-27 09:19:47   来源:   评论:0 点击:

在实际应用中,可能需要动态生成select下拉菜单。本章节通过代码实例,详细介绍一下如何实现此功能。代码如下:[HTML] 纯文本查看 复制代

在实际应用中,可能需要动态生成select下拉菜单。

本章节通过代码实例,详细介绍一下如何实现此功能。

代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script type="text/javascript"> function setFun(){   var id = new Array(1,2,3);   var value = new Array("javascript专区","jQuery专区","实例教程");   var select = document.getElementById("area");   select.length = 1;  select.options[0].selected = true;  for(var x = 0;x<id.length;x++){     var option = document.createElement("option");     option.setAttribute("value",id[x]);    option.appendChild(document.createTextNode(value[x]));     select.appendChild(option);  } } window.onload=function(){  setFun()  }</script></head> <body> <form> <select name="area" id="area"> <option value="0">--选择版块--</option> </select> </form> </body> </html>

可以动态生成select下拉菜单,下面简单介绍一下它的实现过程。

代码注释:

1.function setFun(){},生成select下拉函数。

2.var id = new Array(1,2,3),声明一个数组并初始化,数组值是option项的value值。

3.var value = new Array("javascript专区","jQuery专区","实例教程"),声明一个数组并初始化,此数组的值option的文本内容。

4.var select = document.getElementById("area"),获取select对象。

5.select.length = 1,将select下拉菜单的length属性值设置为1,也就是说只能有一项可以被选中。

6.select.options[0].selected = true,将第一个option设置为被选项。

7.for(var x = 0;x<id.length;x++){},使用for循环遍历id数组。

8.var option = document.createElement("option"),创建option对象。

9.option.setAttribute("value",id[x]),将option的value属性值设置为数组的对应项。

10.option.appendChild(document.createTextNode(value[x])),为option项添加文本节点,也就是<option>和</option>之间的文本。

11.select.appendChild(option),为select下拉菜单添加option项。

相关热词搜索:

上一篇:rowspan和colspan用法详解
下一篇:点击弹出居中带有透明遮罩层窗口

分享到: 收藏
评论排行