您的位置：首页 > Web前端 > JavaScript

使用JavaScript操作DOM动态生成下拉列表

2017-09-13 18:43 561 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>使用JavaScript操作DOM动态生成下拉列表</title>

<script type="text/javascript">
function setFun(){
var id=new Array(1,2,3,4,5);
var value=new Array("北京","深圳","广州","杭州","西安");
//通过DOM树取得下拉列表框元素
var select=document.getElementById("area");
select.length=1;//设置每次只能选择一个
select.options[0].selected=true;//设置第一个为默认选中
for(var x=0;x<id.length;x++){
//设置option中的内容,建立option节点
var option=document.createElement("option");
option.setAttribute("value",id[x]);//设置option的属性值
//在option元素下增加文本节点
option.appendChild(document.createTextNode(value[x]));
select.appendChild(option);//在select中增加option节点
}
}

</script>

</head>



<body onload="setFun()">
<form action="" method="post">
<select name="area" id="area">
<option value="0">==没有地区==</option>
</select>
</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航