原⽣js实现三级联动
简单的三级联动，锻炼逻辑思维
js部分有注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="AllSchool.js"></script>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
}
body{
background-color:aliceblue;
}
.wrapper{
width: 300px;
margin: 100px auto;
}
.wrapper ul .row{
margin-top:10px;
width: 100%;
height: 42px;
border-radius: 14px;
background-color: #fff;
line-height: 40px;
}
.wrapper ul .row span{
margin: 0 8px;
color: rgb(76, 154, 226);
}
.wrapper ul .row span::after {
content: "|";
color: #ccc;
margin-left: 13px;
}
.wrapper ul .row select{
width: 70%;
height: 30px;
border-radius: 5px;
border-color: aliceblue;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li class="row">
<span>省会</span>
<select name="" id="province">
</select>
</li>
<li class="row">
<span>城市</span>
<select name="" id="city"></select>
</li>
<li class="row">
<span>学校</span>
原生js和js的区别
<select name="" id="shcool"></select>
</li>
</ul>
</div>
</body>
</html>
<script>
/*
1: 创建option
2: 根据数据进⾏三级联动
创建初始值时，城市是默认省份对应所有城市(这⾥是北京市)
学校是相对应城市的学校
联动时，最重要的是到关联的条件⽤当前改变的值得value进⾏关联    */
// 获取元素
function $(id){
ElementById(id);
}
// 创建省份
// 创建省份
var selectStr = '';// 省会的字符串
for(var i = 0;i < province.length; i ++)
{
selectStr += "<option value =" +province[i][0]+ ">" +province[i][1]+" </option>";    }
$('province').innerHTML = selectStr;
// 创建城市
var value = createCity(province[0][0]);// //createCity()函数的返回值
createSchool(value);
//创建学校
createSchool(value);
// 省级联动
$('province').onchange = function(){
var value = createCity(this.value);//createCity()函数的返回值
createSchool(value);
}
// 城市联动
$('city').onchange = function(){
createSchool(this.value);
}
// 创建城市函数
function createCity(value){
var cityNode = city[value];// 关联(初始值取第⼀个)
var select2Str = '';
for(var i = 0 ; i < cityNode.length; i++)
{
select2Str += "<option value="+ cityNode[i][0]+ ">" +cityNode[i][1]+"</option>"        }
$('city').innerHTML = select2Str;
return cityNode[0][0];
}
// 创建学校函数
function createSchool(value){
var shcoolNode = allschool[value];// 关联(初始值取第⼀个)
var select3Str = '';
for(var i = 0 ; i < shcoolNode.length; i++)
{
select3Str += "<option>" + shcoolNode[i][2] +"</option>"
}
$('shcool').innerHTML= select3Str;
};
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。