构造函数实现一个省市县三级联动

最新推荐文章于 2024-07-11 18:00:32 发布

寒星_

最新推荐文章于 2024-07-11 18:00:32 发布

阅读量274

点赞数

分类专栏：学习笔记文章标签：函数 javascript

本文链接：https://blog.csdn.net/rocking77/article/details/77200199

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

构造函数实现一个省市县三级联动

所谓实现省市县三级联动,就是给定三个多选框,选定一个省份后,会有相应的市和县可供选择,选定一个市后,会有相应的县可供选择;

基本实现思想是:建立三个select多选框,通过js来动态添加option;

1.先写好基本布局,连接data.js里的省市县数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数_三级联动</title>
    <script type="text/javascript" src="data.js"></script>
</head>
<body>
选择省<select></select>
选择市<select></select>
选择县<select></select>
<script type="text/javascript" src="构造函数.js"></script>
</body>
</html>

2.连接”构造函数.js”文件,使用构造函数的方法来实现联动

这是”构造函数.js”文件的内容

function ThreeLevelChange() {//定义一个三级联动函数
    this.init = function () {//初始化三个多选框的数据并且实现联动的方法
        this.allSelect = document.querySelectorAll("select");//直接添加allSelect到init里作为        
        this.fillProvinces();//调用方法添加所有的省份
        this.fillCities(1);//默认是北京
        this.fillCounties(1);//默认是北京
        var self = this;//为了在事件中也能方便地使用this,将this的地址值赋给了self
        this.allSelect[0].onchange = function (){//省数据发生改变后在市多选框中添加相应的市
            var proID = this.value;   // dom事件处理程序中的this指代那个dom元素,这里指的是this.allSelect[0]
            self.fillCities(proID);
            self.fillCounties(self.allSelect[1].value);//省份发生改变后,县的内容也该随之改变
        };
        this.allSelect[1].onchange = function (){//市改变后,县的内容随之变化
            var cityID = this.value;
            self.fillCounties(cityID);
        }
    };
    this.fillProvinces =  function (){//添加所有的省
        var provinceList = data.provinceList;
        for (var province of provinceList){//遍历
            var proName = province.ProName;
            var proID = province.ProID;
            var opt = this.createOption(proName, proID);
            this.allSelect[0].appendChild(opt);
        }
    };
    this.fillCities = function (proID){//通过省ID来动态添加市
        this.allSelect[1].innerHTML = "";//清除之前添加的市
        var cities = data.cityList;
        for (var city of cities){//遍历
            if (proID == city.ProID){//在对应的ID中添加
                var opt = this.createOption(city.CityName, city.CityID);
                this.allSelect[1].appendChild(opt);
            }
        }
    };
    this.fillCounties = function (cityID){//通过市ID来动态添加县
        this.allSelect[2].innerHTML = ""//先清除之前添加的县
        var counties = data.countyList;
        for (var county of counties){
            if (cityID == county.CityID){
                var opt = this.createOption(county.DisName, county.ID);
                this.allSelect[2].appendChild(opt);
            }
        }
    };
    this.createOption = function (text, value){//添加option
        var option = document.createElement("option");
        option.value = value;//可以把ID添加到option的value中,这样就可以很方便地获取到对应的ID
        option.innerHTML = text;
        return option;
    };
}
var change = new ThreeLevelChange();//构造函数
change.init();//调用构造函数的init方法实现三级联动

附上data.js里的部分数据:

省数据和市数据由省ID来作为联系纽带,而市数据和县数据由市ID来作为联系纽带,这样就可以用对象的方法来获取相应的数据

1.省份数据

var data = {
    "provinceList": [
        {
            "ProID": 1,
            "ProName": "北京市",
            "ProSort": 1,
            "ProRemark": "直辖市"
        },
        {
            "ProID": 2,
            "ProName": "天津市",
            "ProSort": 2,
            "ProRemark": "直辖市"
        },
        {
            "ProID": 3,
            "ProName": "河北省",
            "ProSort": 5,
            "ProRemark": "省份"
        },
        {
            "ProID": 4,
            "ProName": "山西省",
            "ProSort": 6,
            "ProRemark": "省份"
        },......

2.市数据

"cityList": [
        {
            "CityID": 1,
            "CityName": "北京市",
            "ProID": 1,
            "CitySort": 1
        },
        {
            "CityID": 2,
            "CityName": "天津市",
            "ProID": 2,
            "CitySort": 2
        },
        {
            "CityID": 3,
            "CityName": "上海市",
            "ProID": 9,
            "CitySort": 3
        },
        {
            "CityID": 4,
            "CityName": "重庆市",
            "ProID": 27,
            "CitySort": 4
        },
        {
            "CityID": 5,
            "CityName": "邯郸市",
            "ProID": 3,
            "CitySort": 5
        },
        {
            "CityID": 6,
            "CityName": "石家庄市",
            "ProID": 3,
            "CitySort": 6
        },......

3.县数据

"countyList": [
        {
            "Id": 1,
            "DisName": "东城区",
            "CityID": 1,
            "DisSort": null
        },
        {
            "Id": 2,
            "DisName": "西城区",
            "CityID": 1,
            "DisSort": null
        },
        {
            "Id": 3,
            "DisName": "崇文区",
            "CityID": 1,
            "DisSort": null
        },
        {
            "Id": 4,
            "DisName": "宣武区",
            "CityID": 1,
            "DisSort": null
        },
        {
            "Id": 5,
            "DisName": "朝阳区",
            "CityID": 1,
            "DisSort": null
        },
        {
            "Id": 6,
            "DisName": "丰台区",
            "CityID": 1,
            "DisSort": null
        },......

寒星_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
构造函数实现一个省市县三级联动

构造函数实现一个省市县三级联动所谓实现省市县三级联动,就是给定三个多选框,选定一个省份后,会有相应的市和县可供选择,选定一个市后,会有相应的县可供选择;基本实现思想是:建立三个select多选框,通过js来动态添加option;1.先写好基本布局,连接data.js里的省市县数据<!DOCTYPE html><html lang="en"><head> <meta charset="UT
复制链接

扫一扫