三级联动
三级联动的需求很常见，在上一篇我写的项目总结中，就有三级联动的需求，下面我将使用原生的JS写一个简易的省市区的三级联动
—————————————————————————————————————————
准备工作——>node环境（有nodemon工具更好）、三级联动数据、express（简单利用）
—————————————————————————————————————————
代码有详细注释
代码
html部分：
<!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>三级联动</title>
</head>
<body>
<div id="demo">
</div>
<div id="box">
<form action="" method="GET">
省
<select name="province" id="province" class="item" onchange="sp()">
<!-- 这个onchange事件是选项改变时触发，这是关键（省份改变，触发创建对应的城市和区） -->
</select> 市
<select name="city" id="city" class="item" onchange="sc()">
</select> 区
<select name="state" id="state" class="item">
</select>
</form>
</div>
<script src="demo.js"></script>
</body>
<style>
#box {
width: 600px;
height: 600px;
margin: 50px auto;
background-color: rgba(233, 233, 233, 0.979);
display: flex;
justify-content: center;
align-items: center;
}
.item {
width: 150px;
height: 30px;
outline: none;
}
</style>
</html>
数据获取的JS文件
demo.js
window.onload = function() {//window.onload在页面加载完之后再加载外部js文件
let province = document.getElementById('province');
let city = document.getElementById('city');
let state = document.getElementById('state');
init();
};
let str;//存放数据
//获取数据
function init() {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open('GET', 'http://127.0.0.1:8000/demo_server')
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
this.str = xhr.response; //获取到的数据保存到str中
initP(this.str); //创建省份
}
}
}
}
var temp; //保存三级数据
//创建省份
function initP(str) {
this.temp = str;
//以下循环为了创建默认数据
//默认省
for (let i = 0; i < str.length; i++) {
var poption = document.createElement('option');
poption.value = str[i].name;
poption.text = str[i].name;
this.province.append(poption);
}
//默认城市
for (let j = 0; j < str[0].city.length; j++) {
var coption = document.createElement('option');
coption.value = str[0].city[j].name;
coption.text = str[0].city[j].name;
this.city.append(coption);
}
//默认区
for (let k = 0; k < str[0].city[0].area.length; k++) {
var soption = document.createElement('option');
soption.value = str[0].city[0].area[k];
soption.text = str[0].city[0].area[k];
this.state.append(soption);
}
}
let stateindex; //通过该变量知道选择的省份是哪一个
//创建城市
function initC(index) {
this.stateindex = index;
this.city.innerHTML = '';//先清空上一次的联动的数据
for (let i = 0; i < temp[index].city.length; i++) {
var coption = document.createElement('option');
coption.value = temp[index].city[i].name;
coption.text = temp[index].city[i].name;
this.city.append(coption);
}
}
//创建区
function initS(index) {
this.state.innerHTML = '';//先清空上一次的联动的数据
for (let i = 0; i < temp[this.stateindex].city[index].area.length; i++) {
var soption = document.createElement('option');
soption.value = temp[this.stateindex].city[index].area[i];
soption.text = temp[this.stateindex].city[index].area[i];
this.state.append(soption);
}
}
//省份变化，触发改变二三级数据
function sp() {
initC(this.province.selectedIndex);
initS(this.city.selectedIndex);
}
//城市变化，触发三级改变数据
function sc() {
initS(this.city.selectedIndex);
}
服务端
server.js
//1、引入express
const express = require('express');
//创建应用对象
const app = express();
//3、创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/demo_server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
//设置响应体
response.send(str);
});
//4、监听端口启动服务
app.listen(8000, () => {
console.log("服务端已启动，8000端口监听中.....");
});
//这个是数据文件，下载之后，直接放这里就OK了
str = []
三级联动数据
数据文件太长，影响阅读，我直接放资源里了，需要的朋友自行下载，免费！！！
写的比较粗糙，特别是默认选项那里，后续有改进会直接更新本文！
看完的朋友给个赞再走呗（已经不奢求关注了）
版权声明：本文为weixin_45774485原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。