原生js实现三级联动
js实现三级联动
三级联动效果
三级联动：
我写的是省与城市，城市与学校之间的三级联动。顾名思义就是我有三个下拉框，分别表示的是省，城市，学校。省所对应的城市，城市所对应的学校。我如果选择了一个省份，那么就会在城市的下拉框里面就会显示这个省所对应的城市，同理，在学校的下拉框里面也会出现城市所对应的学校。
**注：**本文所取的省份，城市，学校数据来自于互联网，若有差错，敬请谅解
data.js都是数据，太多了，只给出了一个模板。如果想要完整版，私信即可，我看见就会发给你
好了，直接开干
HTML:
html和css代码直接给出，不多说了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js实现三级联动</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="item">
<div class="left province">省份</div>
<div class="right">
<select name="province" id="province">
<option value="00">请选择</option>
</select>
</div>
</div>
<div class="item">
<div class="left province">城市</div>
<div class="right">
<select name="city" id="city">
</select>
</div>
</div>
<div class="item">
<div class="left province">学校</div>
<div class="right">
<select name="school" id="school">
</select>
</div>
</div>
</div>
<script src="./data.js"></script>
<script src="./index.js"></script>
</body>
</html>
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: lightblue;
}
.container {
width: 300px;
margin: 50px auto;
}
.container div {
margin-bottom: 20px;
}
.item {
width: 100%;
height: 50px;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
}
.province {
width: 80px;
font-size: 20px;
line-height: 50px;
/* padding-left: 5px; */
text-align: center;
color: violet;
}
select {
width: 200px;
font-size: 20px;
height: 50px;
border: none;
}
.left {
float: left;
}
.left::after {
content: '|';
color: #ccc;
font-weight: 500;
padding-left: 15px;
}
.right {
float: right;
}
JS:
重要
首先分析一下如何能做到三级联动，我点击省份，去找省份的城市，我再点击城市，再去找城市的学校。这样一想，有了点思路，我想我用对象来表示省份，城市，学校。对象里面用数组来表示相关数据，再给上相关数据的对应的特殊标识不就行了吗，想到这，直接开始写，又因为相关的数据太多，所以我新建一个
data.js文件来放这三个对象，因为数据太多了，所以用什么标识来区分呢，当然是数字简单便捷了。直接上data.js代码
data.js
直接看结构即可，完整版私信即可
var province = {
"11": "重庆市",
"12": "福建省",
}
var city = {
"11": {
"014": "重庆市"
},
"12": {
"015": "漳州市",
"016": "厦门市",
"017": "三明市",
"018": "泉州市",
"019": "莆田市",
"020": "宁德市",
"021": "南平市",
"022": "龙岩市",
"023": "福州市"
},
}
var school = {
"014": [
"重庆大学",
"重庆邮电大学",
"重庆交通大学",
"重庆医科大学",
"西南大学",
"重庆师范大学",
"重庆文理学院",
"重庆三峡学院",
"长江师范学院",
"四川外国语大学",
"西南政法大学",
"四川美术学院",
"重庆科技学院",
"重庆理工大学",
"重庆工商大学",
"重庆工程学院",
"重庆大学城市科技学院",
"重庆警察学院",
"重庆人文科技学院",
"四川外国语大学重庆南方翻译学院",
"重庆师范大学涉外商贸学院",
"重庆工商大学融智学院",
"重庆工商大学派斯学院",
"重庆邮电大学移通学院",
"重庆第二师范学院",
"重庆航天职业技术学院",
"重庆电力高等专科学校",
"重庆工业职业技术学院",
"重庆三峡职业学院",
"重庆工贸职业技术学院",
"重庆机电职业技术学院",
"重庆电子工程职业学院",
"重庆海联职业技术学院",
"重庆信息技术职业学院",
"重庆传媒职业学院",
"重庆城市管理职业学院",
"重庆工程职业技术学院",
"重庆房地产职业学院",
"重庆城市职业学院",
"重庆水利电力职业技术学院",
"重庆工商职业学院",
"重庆应用技术职业学院",
"重庆三峡医药高等专科学校",
"重庆医药高等专科学校",
"重庆青年职业技术学院",
"重庆财经职业学院",
"重庆科创职业学院",
"重庆建筑工程职业学院",
"重庆电讯职业学院",
"重庆能源职业学院",
"重庆商务职业学院",
"重庆交通职业学院",
"重庆化工职业学院",
"重庆旅游职业学院",
"重庆安全技术职业学院",
"重庆公共运输职业学院",
"重庆艺术工程职业学院",
"重庆轻工职业学院",
"重庆电信职业学院",
"重庆经贸职业学院",
"重庆幼儿师范高等专科学校",
"重庆文化艺术职业学院",
"重庆服装工程职业学院",
"重庆资源与环境保护职业学院",
"庆护理职业学院"
],
"015": [
"闽南师范大学",
"厦门大学嘉庚学院",
"漳州职业技术学院",
"漳州城市职业学院",
"漳州科技职业学院",
"漳州理工职业学院",
"漳州卫生职业学院"
],
"016": [
"厦门大学",
"集美大学",
"厦门理工学院",
"厦门医学院",
"厦门华厦学院",
"厦门工学院",
"集美大学诚毅学院",
"厦门海洋职业技术学院",
"厦门演艺职业学院",
"厦门华天涉外职业技术学院",
"厦门城市职业学院",
"厦门兴才职业技术学院",
"厦门软件职业技术学院",
"厦门南洋职业学院",
"厦门东海职业技术学院",
"厦门安防科技职业学院"
],
"017": [
"三明学院",
"福建水利电力职业技术学院",
"三明职业技术学院"
],
"018": [
"华侨大学",
"泉州师范学院",
"仰恩大学",
"闽南理工学院",
"福建师范大学闽南科技学院",
"泉州信息工程学院",
"黎明职业大学",
"福建电力职业技术学院",
"泉州医学高等专科学校",
"泉州纺织服装职业学院",
"泉州华光职业学院",
"泉州理工职业学院",
"泉州经贸职业技术学院",
"泉州工艺美术职业学院",
"泉州工程职业技术学院",
"泉州海洋职业学院",
"泉州轻工职业学院",
"泉州幼儿师范高等专科学校"
],
"019": [
"莆田学院",
"湄洲湾职业技术学院"
],
"020": [
"宁德师范学院",
"宁德职业技术学院"
],
"021": [
"武夷学院",
"福建林业职业技术学院",
"闽北职业技术学院",
"武夷山职业学院"
],
"022": [
"龙岩学院",
"闽西职业技术学院"
],
"023": [
"福州大学",
"福建工程学院",
"福建农林大学",
"福建医科大学",
"福建中医药大学",
"福建师范大学",
"闽江学院",
"福建商学院",
"福建警察学院",
"福建农林大学东方学院",
"阳光学院",
"福州大学至诚学院",
"福建师范大学协和学院",
"福州外语外贸学院",
"福建江夏学院",
"福州理工学院",
"福建农林大学金山学院",
"福建船政交通职业学院",
"福建华南女子职业学院",
"福州职业技术学院",
"福建信息职业技术学院",
"福建农业职业技术学院",
"福建卫生职业技术学院",
"福州英华职业学院",
"福建警官职业学院",
"福州黎明职业技术学院",
"福州科技职业技术学院",
"福建对外经济贸易职业技术学院",
"福建生物工程职业技术学院",
"福建艺术职业学院",
"福建幼儿师范高等专科学校",
"福州软件职业技术学院",
"福建体育职业技术学院",
"闽江师范高等专科学校"
],
}
主要的index.js：
然后开始写一个index.js文件来写三级联动的主要代码：
我是首先是获取到省份，城市，学校的dom。然后先开始forin省份对象，并渲染相关数据到界面。里面的操作是先创建一个option元素，把value，和省份名称渲染进省份的dom里面。
然后给省份注册一个表单事件，change事件。在注册事件里面先清除一下城市的表达显示名称，以便做有关操作时候表单上的数据还在。还要清除一下学校的表单显示。然后先得到表单显示的省份的标识，在得到省份标识对应的城市的数组，然后开始遍历渲染，把有关数据添加进城市的dom里面。值得一提的是，我们选择省份的时候，有时候会选择到请选择这个选项，这个时候浏览器会报错，所以我们要在遍历渲染之前做一个判断操作，如果省份选项等于undefined时就什么也不干，因为选择请选择时，就是undefined。然后渲染完成后要得到默认的城市的标识，在拿到城市的标识所对应的学校数组。然后再循环渲染（为什么要用到循环而不是forin呢？因为forin的都是对象，我的学校都是数组，所以要用到循环）。
最后再给城市注册一个表单change事件，一样先清除学校的表单显示，再得到得到默认的城市的标识，在拿到城市的标识所对应的学校数组。然后再循环渲染进学校的dom中
idnex.js:
// 获取到省份，城市，学校的dom
var provinceDom = document.getElementById('province');
var cityDom = document.getElementById('city');
var schoolDom = document.getElementById('school');
// 遍历省份 渲染
for (key in province) {
// 创建option元素
var provinceOption = document.createElement('option');
// 先得到省份value值
provinceOption.value = key;
// 在得到省份名称
provinceOption.innerHTML = province[key];
// 把创建好的option元素放进省份dom中
provinceDom.appendChild(provinceOption);
}
// 注册省份的表单事件
provinceDom.addEventListener('change', function() {
// 先清除一下城市的表单显示名称
cityDom.innerHTML = '';
// 在清除一下学校的表单显示名称
schoolDom.innerHTML = '';
// 得到表单上显示的省份的标号
var provinceValue = provinceDom.value;
// 得到城市的数组
var citys = city[provinceValue];
// 省份选择请选择选项时啥都不干
if (citys === undefined) {
return;
}
// 遍历渲染
for (key in citys) {
var cityOption = document.createElement('option');
cityOption.value = key;
cityOption.innerHTML = citys[key];
cityDom.appendChild(cityOption);
}
// 得到默认的城市编号
var schools = cityDom.value;
// 城市下的学校数组
var schoolnum = school[schools];
// 循坏，渲染
for (var i = 0; i < schoolnum.length; i++) {
var schoolOption = document.createElement('option');
schoolOption.innerHTML = schoolnum[i];
schoolDom.appendChild(schoolOption);
}
})
cityDom.addEventListener('change', function() {
// 清除学校
schoolDom.innerHTML = '';
// 得到城市的编号
var schools = cityDom.value;
// 得到对应的学校数组
var schoolnum = school[schools];
// 遍历渲染
for (var i = 0; i < schoolnum.length; i++) {
var schoolOption = document.createElement('option');
schoolOption.innerHTML = schoolnum[i];
schoolDom.appendChild(schoolOption);
}
})
若有错误，敬请指正
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
