JS省市区三级联动

F2E_zeke

已于 2023-04-20 14:16:56 修改

阅读量438

点赞数 1

分类专栏：基础基础 JavaScript 文章标签： javascript

于 2021-09-25 18:02:00 首次发布

本文链接：https://blog.csdn.net/rd_xiaobai/article/details/120475121

版权

JavaScript DOM操作事件监听三级联动数据结构

关键词由CSDN通过智能技术生成

JavaScript 同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

基础基础

10 篇文章 0 订阅

订阅专栏

省市区三级联动

纯javascript写出省市区三级联动

省区，市区，地区需要自己构建数据

1、下面是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>Document</title>
</head>
<body>
    <!-- 显示省 -->
    <select id="province">
        <!-- 这里给一个初始值是为了当选择省份时，选的不是'广东省'等时，选的是'选择省份'时--#city菜单就不会有城市出现，有的只有'选择市区' -->
        <option value="-1">选择省份</option>
    </select>
    <!-- 显示市 -->
    <select id="city">
        <!-- 这里给一个初始值是为了当选择市区时，选的不是'广州市'等时，选的是'选择市区'时--#region菜单就不会有地区出现，有的只有'选择地区' -->
        <option value="-1">选择市区</option>
    </select>
    <!-- 显示区 -->
    <select id="region">
        <option>选择地区</option>
    </select>
</body>
</html>

2、下面是javascript结构

------数据构建

//构建数据--都是数组里套数组，数组里套对象
var arr = [
    {
        name:'广东省',
        town:[
            {towns:'广州市',raea:['天河区','花都区']},
            {towns:'佛山市',raea:['高明区','禅城区']}
        ]
    },
    {
        name:'浙江省',
        town:[
            {towns:'杭州市',raea:['滨江区','余杭区']},
            {towns:'温州市',raea:['鹿城区','龙湾区']}
        ]
    },
    {
        name:'天津市',
        town:[
            {towns:'天津市',raea:['武清区','和平区']}
        ]
    }
];
/*
        console.log(arr[0].name);//广东省
        console.log(arr[0].town[0].towns);//广州市
        console.log(arr[0].town[0].raea[0]);//天河区
    */

-----js结构行为

let provinceDom = document.querySelector('#province');//省区
let cityDom = document.querySelector('#city');//市区
let regionDom = document.querySelector('#region');//地区
//在第三步根据市区更换地区时，需要用到市区的上级是哪一个省区，即这里需要一个变量存储省区
//在第二步根据省区更换市区时，就需要用此变量存储当时的省区了
var province;
//1、把数据遍历一遍--显示出省区
arr.forEach(function(item,index){
    //创建节点，接收数组的每一个省区
    let optionDom = document.createElement('option');
    optionDom.setAttribute('value',index);
    optionDom.innerHTML = item.name;
    //把option节点插入到省区节点中
    provinceDom.appendChild(optionDom);
})
//2、根据省区内容更换市区
provinceDom.onchange = function(){
    if(this.value == -1){
        cityDom.innerHTML = '<option value="-1">选择市区</option>';
        return;
    }
    cityDom.innerHTML = '<option value="-1">选择市区</option>';
    regionDom.innerHTML = '<option>选择地区</option>';
    arr[this.value].town.forEach(function(item,index){
        let optionDom = document.createElement('option');
        optionDom.setAttribute('value',index);
        optionDom.innerHTML = item.towns;
        cityDom.appendChild(optionDom);
    });
    province = arr[this.value];//存储当时选中的省区内容--在第三步需要用到
}
//3、根据市区内容更换地区
cityDom.onchange = function(){
    if(this.value == -1){
        regionDom.innerHTML = '<option>选择地区</option>';
        return;
    }
    regionDom.innerHTML = '<option>选择地区</option>';
    province.town[this.value].raea.forEach(function(item,index){
        let optionDom = document.createElement('option');
        optionDom.innerHTML = item;
        regionDom.appendChild(optionDom);
    });
}