<!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: 学习的过程是一点一滴的积累,不是聪明就能成功!