原生JS实现省市区三级联动

最新推荐文章于 2024-06-16 14:06:27 发布

summer·

最新推荐文章于 2024-06-16 14:06:27 发布

阅读量865

点赞数 5

分类专栏： JS js小效果文章标签： javascript css html node.js 前端

本文链接：https://blog.csdn.net/weixin_45774485/article/details/115553637

版权

JS 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

js小效果

7 篇文章 0 订阅

订阅专栏

三级联动

三级联动的需求很常见，在上一篇我写的项目总结中，就有三级联动的需求，下面我将使用原生的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 = []

三级联动数据

数据文件太长，影响阅读，我直接放资源里了，需要的朋友自行下载，免费！！！

写的比较粗糙，特别是默认选项那里，后续有改进会直接更新本文！
看完的朋友给个赞再走呗（已经不奢求关注了）

summer·

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JS实现省市区三级联动

三级联动三级联动的需求很常见，在上一篇我写的项目总结中，就有三级联动的需求，下面我将使用原生的JS写一个简易的省市区的三级联动—————————————————————————————————————————准备工作——>node环境（有nodemon工具更好）、三级联动数据、express（简单利用）—————————————————————————————————————————代码有详细注释代码html部分：<!DOCTYPE html><html lan
复制链接

扫一扫