JavaScript 动态生成select下拉菜单

快乐打工仔 分类:实例代码

JavaScript 动态生成select下拉菜单属于前端实例代码,有关更多实例代码大家可以查看

在实际应用中,可能需要动态生成select下拉菜单,本章节通过代码实例介绍一下如何实现此功能。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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项。

二.相关阅读:

(1).document.getElementById参阅document.getElementById()一章节。

(2).document.createElement参阅document.createElement()一章节。

(3).for循环参阅JavaScript for 循环语句一章节。

(4).setAttribute参阅JavaScript setAttribute()一章节。

(5).appendChild参阅JavaScript appendChild()一章节。

JavaScript 动态生成select下拉菜单,这样的场景在实际项目中还是用的比较多的,关于JavaScript 动态生成select下拉菜单就介绍到这了。

回复

我来回复
  • 暂无回复内容