最近在公司忙于前端开发 主要做微信小程序跟webApp 都是直接上手的，毕竟前面做过Android开发，相对来说难度不大，
今天晚上睡不着 起来写下js代码 想想三级联动在平时开发中经常用到，可能我们一般是网上拷贝代码，今天自己动手参考网上资料来写的
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>三级联动</title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div>
请选择地区：
<select name="" id="proc" onchange="showCity()">
<option value="">--请选择省--</option>
</select>
<select name="" id="city" onchange="showDist()">
<option value="">--请选择市--</option>
</select>
<select name="" id="dist">
<option value="">--请选择区--</option>
</select>
</div>
<script type="text/javascript" src=""></script>
<script>
//声明省
var oProc = ["安徽","上海","山东"]; //直接声明array
//声明市
var oCity = [
["合肥","淮南","芜湖"],
["浦东","闵行","浦西"],
["济南","青岛","枣庄"]
];
//声明区
var oDist = [
[
["政务区","庐阳区","蜀山区"],
["田家庵区","大通区","九龙岗区"],
["镜湖区","鸠江区","三山区"]
],
[
["浦东1","浦东2","浦东3"],
["闵行1","闵行2","闵行3"],
["浦西1","浦西","浦西3"]
],
[
["历下区","天桥区","长清区"],
["市南区","市北区","李沧区"],
["薛城区","市中区","峄城区"]
]
];
//通过id找到标签元素
var oproc = document.getElementById("proc");var ocity = document.getElementById("city");
var odist = document.getElementById("dist");
//当页面加载完毕之后
window.onload = function(){for(var i =0;i<oProc.length;i++){
//创建元素节点
var oOpt = document.createElement("option");
//创建文本节点
var oTxt = document.createTextNode(oProc[i]);
//添加到容器中去
oOpt.appendChild(oTxt);oproc.appendChild(oOpt);
}
};
//显示城市列表
function showCity(){if(oproc.value=="-1"){
ocity.options.length = 1;
odist.options.length = 1;
}else{
ocity.options.length = 1;
odist.options.length = 1;
var num = oproc.options.selectedIndex;
//console.log(num);
for(var i =0;i<oCity[num-1].length;i++){
var oOpt = document.createElement("option");
var oTxt = document.createTextNode(oCity[num-1][i]);
oOpt.appendChild(oTxt);
ocity.appendChild(oOpt);
}
}
}
//显示列表
function showDist(){if(ocity.value=='-1'){
odist.options.length = 1
}else{
odist.options.length = 1;
var numPro = oproc.options.selectedIndex;
var numCity = ocity.options.selectedIndex;
for(var i=0;i<oDist[numPro-1][numCity-1].length;i++){
var oOpt = document.createElement("option");
var oTxt = document.createTextNode(oDist[numPro-1][numCity-1][i]);
oOpt.appendChild(oTxt);
odist.appendChild(oOpt);
}
}
}
</script>
</body>
</html>