<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市联动</title>
</head>
<body>
<select name="" id="province" onchange="d(this);">
<option value="-1">--请选择省--</option>
</select>
<select name="" id="city" onchange="e(this)">
<option value="-1">--请选择市--</option>
</select>
<select name="" id="zhen">
<option value="-1">--请选择镇--</option>
</select>
<script>
// onchange:发生改变的时候触发事件
//声明省
var pres = ["北京市", "天津市", "重庆市","河北省","广东省","上海市"];
//声明省
var citys =[
['昌平区','海淀区','朝阳区'],
['滨海区','武清县','南开区'],
['长寿区','江津区','合川区'],
['廊坊','石家庄','保定'],
['佛山','东莞','广州'],
['浦东','普陀区','虹桥']
];
var zhens = [
[
["昌平1", "昌平2", "昌平3"],
["海淀1", "海淀2", "海淀3"],
["朝阳1", "朝阳2", "朝阳3"]
],
[
["滨海1", "滨海2", "滨海3"],
["武清1", "武清2", "武清3"],
["南开1", "南开2", "南开3"]
],
[
["长寿1", "长寿2", "长寿3"],
["江津1", "江津2", "江津3"],
["合川1", "合川2", "合川3"]
],
[
["廊坊1", "廊坊2", "廊坊3"],
["石家庄1", "石家庄2", "石家庄3"],
["保定1", "保定2", "保定3"]
],
[
["佛山1", "佛山2", "佛山3"],
["东莞1", "东莞2", "东莞3"],
["广州1", "广州2", "广州3"]
],
[
["浦东1", "浦东2", "浦东3"],
["普陀1", "普陀2", "普陀3"],
["虹桥1", "虹桥2", "虹桥3"]
],
];
//设置一个省的公共下标
var sheng = -1;
// 1.获取对象
var province = document.getElementById('province');
var city = document.getElementById('city');
var zhen = document.getElementById('zhen');
//
// 2.1 设置省份的值
var value = this.value;
for (var i = 0; i < pres.length; i++) {
//声明option.<option value="pres[i]">Pres[i]</option>
var op = new Option(pres[i], i);
// console.log(op);
//添加
province.options.add(op);
}
function d(obj) {
if (obj.value == -1) {
city.options.length = 0;
zhen.options.length = 0;
}
//获取值
var val = obj.value;
sheng = obj.value;
//获取ctiry
var cs = citys[val];
// console.log(cs);
//获取默认区
var as = zhens[val][0];
//先清空市
city.options.length = 0;
zhen.options.length = 0;
for (var i = 0; i < cs.length; i++) {
var op = new Option(cs[i], i);
city.options.add(op);
}
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
zhen.options.add(op);
}
}
function e(obj) {
var val = obj.selectedIndex;
var as = zhens[sheng][val];
zhen.options.length = 0;
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
zhen.options.add(op);
}
}
</script>
</body>
</html>