扫一扫下方二维码，关注本站官方公众号
获取永久解锁本站全部文章的验证码
还能不定期领现金红包
扫一扫下方二维码，关注本站官方公众号
获取永久解锁本站全部文章的验证码
还能不定期领现金红包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<ul class="container">
<li class="row">
<p>省 会</p>
<div><select name="" id="province">
<option value="">1</option>;
<option value="">2</option>;
<option value="">3</option>;
<option value="">4</option>;
<option value="">5</option>;
</select></div>
</li>
<li class="row">
<p>城 市</p>
<div><select name="" id="city"></select></div></li>
<li class="row">
<p>院 校</p>
<div><select name="" id="school"></select></div>
</li>
</ul>
<script src="js/Allschool.js"></script>
<script src="js/index.js"></script>
<!--引入js文件是有顺序的-->
</body>
</html>var province = [["00","北京市"],["01","重庆市"],["02","湖北省"],["03","福建省"],["04","江苏省"],["05","河北省"],["06","河南省"],["07","甘肃省"]];
var city = {"00":[["317","北京市"]],
"01":[["001","张掖市"],["0011","武威市"],["003","天水市"],["005","庆阳市"],["003","得到市"],["007","的的市"],["009","分工市"]],
"02":[["009","随时市"],["001","方法市"],["013","如果市"],["007","庆阳市"],["011","皮革市"],["015","的的市"],["017","皮肤市"]],
"03":[["005","高光市"],["003","分隔市"],["005","天水市"],["013","让他市"],["009","得到市"],["007","的的市"],["003","排骨市"]],
"04":[["007","分工市"],["009","客人市"],["001","欧冠市"],["015","佩服市"],["005","股份市"],["001","的的市"],["001","分工市"]],
"05":[["0019","光辉市"],["007","刚刚市"],["007","天水市"],["014","平时市"],["001","得到市"],["003","苹果市"],["011","更好市"]],
"06":[["017","解决市"],["001","版本市"],["009","烹饪市"],["011","庆阳市"],["005","规划市"],["009","耦合市"],["015","分工市"]],
"07":[["011","哈哈市"],["011","欧锦市"],["001","配合市"],["009","频道市"],["003","得到市"],["003","的的市"],["017","客人市"]],};
var allschool ={
"000":[[0,0,"河西学院"]],
"001":[[1,0,"武威职业学院"],[1,0,"甘肃工程学院"],[1,0,"甘分学院"]],
"002":[[0,0,"地方学院"]],
"003":[[1,0,"房峰辉学院"],[1,0,"甘分学院"],[1,0,"回复学院"]],
"004":[[0,0,"规划学院"]],
"005":[[1,0,"结构学院"],[1,0,"腹股沟学院"]],
"006":[[0,0,"还分学院"]],
"007":[[1,0,"回放学院"],[1,0,"回复学院"]],
"008":[[0,0,"个分学院"]],
"009":[[1,0,"防范学院"],[1,0,"官个学院"]],
"010":[[0,0,"高光学院"]],
"011":[[1,0,"官方学院"],[1,0,"反倒是学院"]],
"012":[[0,0,"方法的学院"]],
"013":[[1,0,"示符学院"],[1,0,"风格学院"]],
"014":[[0,0,"分工学院"]],
"015":[[1,0,"官方的学院"],[1,0,"盖特学院"]],
"016":[[0,0,"放过他学院"]],
"017":[[1,0,"送给他学院"],[1,0,"该地学院"]],
"018":[[0,0,"分隔学院"]],
"019":[[1,0,"高大上学院"],[1,0,"高收入学院"]],
"317":[[0,0,"北京大学"],[0,0,"中国人民大学"],[0,0,"清华大学"],[0,0,"北京工业大学"]]
};
/**
* 分析数据 通过省会的二维数组中的城市对应的数字...>城市对象的属性 从而找到对象城市数组
* console.log(province);
* console.log(city);
* console.log(allshcool);
*
* 找到city对应的数字 。。。》院校的属性值 从而找到对应的学院数组
*/
(function(){//命名空间，代码块，块级作用域
var provinceNode = document.getElementById('province');
cityNode = document.getElementById('city');
schoolNode = document.getElementById('school');
//省会的获取
var provinceStr='';
for(var i =0;i<province.length;i++){
//province[i][1];
provinceStr += '<option value='+province[i][0]+'>'+province[i][1]+'</option>';
//在两个select中间插入这些代码
}
provinceNode.innerHTML=provinceStr;
//城市的获取--数组
var cityArr = city[provinceNode.value];
//console.log(cityArr);
var cityStr = '';
for(var i=0;i<cityArr.length;i++){
//province[i][1]
cityStr += '<option value='+cityArr[i][0]+'>'+cityArr[i][1]+'</option>';
}
cityNode.innerHTML=cityStr;
//院校的获取--数组
//console.log(cityNode.value);
var schoolArr = allschool[cityNode.value];
//console.log(cityNode.value);
var schoolStr = '';
for(var i=0;i<schoolArr.length;i++){
//province[i][1]
schoolStr += '<option >'+schoolArr[i][2]+'</option>';
}
schoolNode.innerHTML = schoolStr;
//***关联，联动的事件***
//第一级联动二三级
provinceNode.onchange = function(){//省会改变 --城市 --院校都会变
//城市的获取--数组
var cityArr = city[provinceNode.value];
//console.log(cityArr);
var cityStr = '';
for(var i=0;i<cityArr.length;i++){
//province[i][1]
cityStr += '<option value='+cityArr[i][0]+'>'+cityArr[i][1]+'</option>';
}
cityNode.innerHTML=cityStr;
//院校的获取--数组
//console.log(cityNode.value);
var schoolArr = allschool[cityNode.value];
//console.log(cityNode.value);
var schoolStr = '';
for(var i=0;i<schoolArr.length;i++){
//province[i][1]
schoolStr += '<option >'+schoolArr[i][2]+'</option>';
}
schoolNode.innerHTML = schoolStr;
}
//第二级联动第三级
cityNode.onchange=function(){
//院校的获取--数组
//console.log(cityNode.value);
var schoolArr = allschool[cityNode.value];
//console.log(cityNode.value);
var schoolStr = '';
for(var i=0;i<schoolArr.length;i++){
//province[i][1]
schoolStr += '<option >'+schoolArr[i][2]+'</option>';
}
schoolNode.innerHTML = schoolStr;
}
})()
*{
padding:0;
margin: 0;
list-style: none;/*去掉圆点*/
}
body{
background: aliceblue;
}
.container{
width: 300px;
margin: 50px auto;
}
.container li.row{
width: 100%;
height: 42px;
background: white;
border-radius: 15px;
margin-top: 10px;
}
li.row p{
display: inline-block;/*变成行内块*/
color:#16b7f7;
line-height: 42px;
padding: 0 10px;/*上下0，左右10空隙*/
}
li.row p::after{ /* p后面不能有空格*/
content:"|";
color:#cccccc;
padding: 0 0 0 15px;
}
li.row div{
display: inline-block;
width: 70%;
height: 100%;
}
li.row div select{
width: 100%;
height: 30px;
border-radius: 5px;
border-color: aliceblue;
}
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
