三级联动效果

最新推荐文章于 2022-02-19 21:45:19 发布

MR_LY666

最新推荐文章于 2022-02-19 21:45:19 发布

阅读量348

点赞数 1

分类专栏： javascript 文章标签： javascript 面向对象

本文链接：https://blog.csdn.net/MR_LY666/article/details/77341376

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

学习了JS的面向对象,然后用面向对象去实现城市名称的三级联动效果

用面向对象去实现城市名称的三级联动效果

首先创建三个下拉选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="city_js.js"></script>
</head>
<body>
    <select></select>省
    <select></select>市
    <select></select>县
</body>
</html>

引入的javascript的文件因为太多,就不放上去了,有兴趣的可以去下载,文末会给出下载文件

然后编写js代码

<script>
    //创建一个构造函数
    function GetMsg() {
        //初始化的一些操作
        this.init = function () {
            this.allSelect = document.querySelectorAll("select");
            this.fillProvence();
            this.fillCity(1);
            this.fillCounty(1);
            var  self = this;
            this.allSelect[0].onchange = function () {
                var ProID = this.value;
                self.fillCity(ProID);
                self.fillCounty(self.allSelect[1].value);
            }
            this.allSelect[1].onchange = function () {
                var CityID = this.value;
                self.fillCounty(CityID);
            }
        }
        //把省份放入select
        this.fillProvence = function () {
            var provenceList = city.provinceList;
            for(var provence of provenceList){
                var opt = this.createOption(provence.ProName,provence.ProID);
                this.allSelect[0].appendChild(opt);
            }
        }
        //把市放入select
        this.fillCity = function (ProID) {
            this.allSelect[1].innerHTML = "";
            var cityList = city.cityList;
            for(var citys of cityList){
                if(ProID == citys.ProID){
                    var CityName = citys.CityName;
                    var CityID = citys.CityID;
                    var opt = this.createOption(CityName,CityID);
                    this.allSelect[1].appendChild(opt);
                }
            }
        }
        //把县放入select
        this.fillCounty = function (CityID) {
            this.allSelect[2].innerHTML = "";
            var countyList = city.countyList;
            for(var counties of countyList){
                if(CityID == counties.CityID){
                    var DisName = counties.DisName;
                    var Id = counties.Id;
                    var opt = this.createOption(DisName,Id);
                    this.allSelect[2].appendChild(opt);
                }
            }
        }
        //创建option
        this.createOption = function (text,value) {
            var option = document.createElement("option");
            option.value = value;
            option.innerHTML = text;
            return option;
        }
    }
//用构造函数创建对象
var p1 = new GetMsg();
    p1.init();//调用初始化方法