<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
</head>
<body>
???<select id="province" onchange="func1(this)"></select>
???<select id="city"></select>
???<script>
???????data={"安徽":["马鞍山","合肥","芜湖","铜陵","蚌埠"],"江苏":["南京","苏州","无锡","常州","南通"],"山东":["济南","青岛","即墨","蓬莱","泰州"]};
???????var pro=document.getElementById("province"); ?????//找到省份的标签对象
???????var cit=document.getElementById("city"); ?????????//找到城市的标签对象
???????for (var k in data){ ?????????????????????????????//遍历data数据 k是键 省份名
???????????var opt=document.createElement("option"); ??????//创建option的标签
???????????pro.appendChild(opt); ??????????????????????????//添加创建的option标签到省份里
???????????opt.innerHTML=k; ????????????????????????????????// 把k的键的文本 添加到标签内
???????????}
???????function func1(ev) {
???????????cit.options.length=0; ??????????????????????????//这里使用了技巧 用options.length=0清空了每次点击后添加的option
???????????for(var i in data[ev.value] ){ ????????????????// this.value是原来省份里的键值
???????????????var op=document.createElement("option"); ????????//创建option的标签
???????????????cit.appendChild(op); ????????????????????????//添加创建的option
???????????????op.innerHTML=data[ev.value][i]; ?????????????// 注意: i不是键内数据的内容 是索引 不能直接=i
???????????}
???????}
???</script>
</body>
</html>
================== 注:这里并没有直接在HTML里写死静态代码,因为如果数据的添加和修改会很麻烦,用JS语句控制只需要修改DATA数据即可==========================
PS: 学习的过程是一点一滴的积累,不是聪明就能成功!
js 省份城市二级动态联动的例子
原文地址：http://www.cnblogs.com/laoguiaabb/p/8033060.html