三级联动
程序员文章站
2022-07-06 12:00:47
请选择地区： ......
<p>
请选择地区：
<select name="" id="proc">
<option value="">--请选择省--</option>
</select>
<select name="" id="city">
<option value="">--请选择市--</option>
</select>
<select name="" id="dist">
<option value="">--请选择区--</option>
</select>
</p>
<body>
<script>
//声明省
var oproc = ["安徽", "上海", "山东"]; //直接声明array
//声明市
var ocity = [
["合肥", "淮南", "芜湖"],
["浦东", "闵行", "浦西"],
["济南", "青岛", "枣庄"]
];
//声明区
var odist = [
[
["政务区", "庐阳区", "蜀山区"],
["田家庵区", "大通区", "九龙岗区"],
["镜湖区", "鸠江区", "三山区"]
],
[
["浦东1", "浦东2", "浦东3"],
["闵行1", "闵行2", "闵行3"],
["浦西1", "浦西", "浦西3"]
],
[
["历下区", "天桥区", "长清区"],
["市南区", "市北区", "李沧区"],
["薛城区", "市中区", "峄城区"]
]
];
// 目标：实现三级联动
/// 分析 一下
// 1. 一进来应该加载所有的省的内容
// 2. 选择了省以后 ，动态加载当前省下面的所有的城市
// 3. 选择了城市以后，动态去加载当前城市下面所有的县
// 1. 一进来应该加载所有的省的内容
var proc = document.getelementbyid('proc');
var city = document.getelementbyid('city');
var dist = document.getelementbyid('dist');
for (var i = 0; i < oproc.length; i++) {
var op = document.createelement('option');
op.innertext = oproc[i];
proc.appendchild(op);
}
// 2. 选择了省以后 ，动态加载当前省下面的所有的城市
proc.onchange = function () {
if (proc.options.selectedindex == 0) { //判断如果都没选中的时候,代码不执行
city.options.length = 1;
dist.options.length = 1;
return false;
}
city.options.length = 1;
dist.options.length = 1;
var select = proc.options.selectedindex; //返回的是当前省被选中的那个索引值 ，这个值是从1 开始
console.log(select)
var index = select - 1;
for (var j = 0; j < ocity[index].length; j++) {
var cop = document.createelement('option');
cop.innertext = ocity[index][j];
city.appendchild(cop);
}
}
// 3. 选择了城市以后，动态去加载当前城市下面所有的县
city.onchange = function () {
if (city.options.selectedindex == 0) {
dist.options.length = 1;
return false;
}
dist.options.length = 1;
var cselct = city.options.selectedindex;
//这个是是拿到的城市选中
console.log(cselct)
// 的那个
var sselct = proc.options.selectedindex // 拿到选中的省的索引
for (var i = 0; i < odist[sselct - 1][cselct - 1].length; i++) {
var dop = document.createelement('option');
dop.innertext = odist[sselct - 1][cselct - 1][i];
dist.appendchild(dop);
}
}
</script>
下一篇： jQuery实现单击某个标签改变样式