jquery+ajax实现省市区三级联动(封装和不封装两种方式)

jquery+ajax实现省市区三级联动

前言

省市区三级联动是Web开发中常用的功能之一，通过该功能可以帮助用户快速选择所在地区。本文主要介绍如何使用jquery和ajax实现省市区三级联动的功能，包括封装和不封装两种方式。

准备工作

在开始编写代码之前，我们需要先了解一下使用该功能需要准备哪些文件。

• jQuery库：用于编写JS代码实现逻辑
• JSON数据文件：用于存储省市区数据
• HTML文件：用于展示页面和调用JS代码
• JS文件：用于编写JS代码

实现方式一：不封装

1.编写HTML

在HTML文件中定义三个下拉框，分别用于展示省、市、区的信息。

<select id="province"></select>
<select id="city"></select>
<select id="district"></select>

2.编写JS代码

在JS文件中编写JS代码实现省市区三级联动的功能。具体实现步骤如下：

2.1 获取JSON数据

使用ajax方式获取JSON数据。

$.ajax({
    url: '/data.json',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        //TODO: 解析JSON数据
    }
});

2.2 解析JSON数据

将获取到的JSON数据解析成数组，方便后续操作。

var province = new Array();
for (var i in data) {
    if (data[i].parentId == 0) {
        province.push(data[i]);
    }
}

2.3 绑定省下拉框

将获取到的省信息绑定到省下拉框中。

for (var i in province) {
    $('#province').append('<option value="' + province[i].id + '">' + province[i].name + '</option>');
}

2.4 绑定市下拉框

当省下拉框选择了某一项时，将该省的市信息绑定到市下拉框中。

$('#province').change(function() {
    $('#city').empty();
    $('#city').append('<option value="-1">--请选择--</option>');
    $('#district').empty();
    $('#district').append('<option value="-1">--请选择--</option>');
    var provinceId = $(this).val();
    var city = new Array();
    for (var i in data) {
        if (data[i].parentId == provinceId) {
            city.push(data[i]);
        }
    }
    for (var i in city) {
        $('#city').append('<option value="' + city[i].id + '">' + city[i].name + '</option>');
    }
});

2.5 绑定区下拉框

当市下拉框选择了某一项时，将该市的区信息绑定到区下拉框中。

$('#city').change(function() {
    $('#district').empty();
    $('#district').append('<option value="-1">--请选择--</option>');
    var cityId = $(this).val();
    var district = new Array();
    for (var i in data) {
        if (data[i].parentId == cityId) {
            district.push(data[i]);
        }
    }
    for (var i in district) {
        $('#district').append('<option value="' + district[i].id + '">' + district[i].name + '</option>');
    }
});

3.展示效果

将编写好的HTML和JS文件放到Web服务器中，即可在浏览器中打开该页面，展示三级联动效果。

实现方式二：封装

在实现方式一中，代码逻辑比较繁琐，需要编写多个事件监听器和循环语句，不利于代码的维护。因此，我们可以将这些代码封装成一个简单易用的插件，方便开发者调用。

1.编写HTML

与实现方式一中的HTML代码一致。

2.编写JS代码

在JS文件中编写如下代码：

(function($) {
    $.fn.citySelect = function() {
        var data;
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", "/data.json", false);//同步方式获取JSON数据
        xmlHttp.send(null);
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            data = JSON.parse(xmlHttp.responseText);
        }

        var province = new Array();
        for (var i in data) {
            if (data[i].parentId == 0) {
                province.push(data[i]);
            }
        }

        var $province = $(this).find('#province');
        var $city = $(this).find('#city');
        var $district = $(this).find('#district');

        $province.empty();
        $province.append('<option value="-1">--请选择--</option>');
        for (var i in province) {
            $province.append('<option value="' + province[i].id + '">' + province[i].name + '</option>');
        }

        function bindCity(provinceId) {
            $city.empty();
            $city.append('<option value="-1">--请选择--</option>');
            $district.empty();
            $district.append('<option value="-1">--请选择--</option>');
            var city = new Array();
            for (var i in data) {
                if (data[i].parentId == provinceId) {
                    city.push(data[i]);
                }
            }
            for (var i in city) {
                $city.append('<option value="' + city[i].id + '">' + city[i].name + '</option>');
            }
        }

        function bindDistrict(cityId) {
            $district.empty();
            $district.append('<option value="-1">--请选择--</option>');
            var district = new Array();
            for (var i in data) {
                if (data[i].parentId == cityId) {
                    district.push(data[i]);
                }
            }
            for (var i in district) {
                $district.append('<option value="' + district[i].id + '">' + district[i].name + '</option>');
            }
        }

        $province.change(function() {
            var provinceId = $(this).val();
            if (provinceId != -1) {
                bindCity(provinceId);
            }
        });

        $city.change(function() {
            var cityId = $(this).val();
            if (cityId != -1) {
                bindDistrict(cityId);
            }
        });
    }
})(jQuery);

3.展示效果

在HTML文件中引入jquery和上述封装好的JS文件，然后在javascript中调用这个插件。

<html>
<head>
    <title>省市区三级联动</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="/citySelect.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#select').citySelect();
        });
    </script>
</head>
<body>
<div id="select">
    <select id="province"></select>
    <select id="city"></select>
    <select id="district"></select>
</div>
</body>
</html>

运行该HTML文件后，在浏览器中即可展示省市区三级联动的效果。

总结

通过本文介绍的两种不同实现方式，我们可以发现使用封装的方式可以更加简化代码，并且便于维护。而对于不封装的方式，虽然代码的逻辑比较繁琐，但是依然是实现三级联动的可行方案。