最新消息:文章中包含代码时,请遵守代码高亮规范!

省市区联动的组件【原创】

JavaScript Jonny 137浏览 0评论

我们写项目的时候,经常会用到省市区联动,在本站中也看到一些省市区联动的写法,感觉代码还是有点复杂,所以自己写了一个组件,能够符合一部分的需求,用起来也更方便。
我在本地的js文件价里有一个省市区的json格式的数据,所以这个组件能够用ajax获取本地的省市区数据,也可以从服务器端用ajax获取省市区数据。
附件下载在文章底部,使用时需要服务器环境,因为都是用ajax获取的数据。

基础html代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>省市区联动</title>
</head>
<body>
    <!-- 写了data-area="area"就默认调用插件使用的是本地json数据没有回显 -->
    


<div data-area="area">
        <select name="" class="province">
<option value="">请选择省份</option>
        </select>
        <select name="" class="city">
<option value="">请选择城市</option>
        </select>
        <select name="" class="county">
<option value="">请选择区县</option>
        </select>
    </div>






    <!-- 自己手动调用插件,可以设置默认参数 -->
    


<div id="area">
        <select name="" class="province">
<option value="">请选择省份</option>
        </select>
        <select name="" class="city">
<option value="">请选择城市</option>
        </select>
        <select name="" class="county">
<option value="">请选择区县</option>
        </select>
    </div>




<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/area.js"></script>
<script type="text/javascript">
    $(function(){
        $('#area').areaLinkage({
            province_id:'110000',
            city_id:'110100',
            county_id:'110101'
        })
    })
</script>
</body>
</html>

js的代码也不是很多,在这里贴出来,附件里主要是多了一个省市区的json数据:

(function($) {
    $.fn.extend({
        //插件名称 - areaLinkage
        areaLinkage: function(options) {

            //默认参数
            var defaults = {
                url: 'js/area.json', //获取本地省市区json的路径,也可以是服务器端的路由
                data:{},             //需要发送过去的数据
                array:[],            //如果数据在多维数组下,比如data=>[info=>[0=>[name=>'jonny',age=>'1'],1=>[name=>'jonny',age=>'1']]],需要填写['data','info'],最多4个
                province_id: '',     //默认选中时的省份id
                city_id: '',         //默认选中时的市份id
                county_id: ''        //默认选中时的区/县id
            };

            var options = $.extend({}, defaults, options);
            var opt = options;
            var _that = this.selector;

            function area() {

                var num = 0;
                var areaAllJson;

                $.post(opt.url, opt.data, function(result) {
                    if(opt.array.length == 0){
                        areaAllJson = result

                    }else if(opt.array.length == 1){
                        areaAllJson = result[opt.array[0]]

                    }else if(opt.array.length == 2){
                        areaAllJson = result[opt.array[0]][opt.array[1]]

                    }else if(opt.array.length == 3){
                        areaAllJson = result[opt.array[0]][opt.array[1]][opt.array[2]]

                    }else if(opt.array.length == 4){
                        areaAllJson = result[opt.array[0]][opt.array[1]][opt.array[2]][opt.array[3]]

                    }else{
                        alert('数据请求失败');
                        return false;
                    }

                    var id = opt.province_id;
                    var parent_id = 0;
                    var _this = $('.province',_that);
                    
                    getArea(id,parent_id,_this);

                });


                $('.province', _that).change(function() {
                    var id = opt.city_id;
                    var parent_id = $('option:selected', this).val();
                    
                    var _this = $(this).parents(_that).find('.city');
                    $(this).parents(_that).find('.county').children('option:not(:eq(0))').remove();
                    

                    getArea(id, parent_id, _this);
                });

                $('.city', _that).change(function() {
                    var id = opt.county_id;
                    var parent_id = $('option:selected', this).val();
                    var _this = $(this).parents(_that).find('.county');
                    
                    getArea(id, parent_id, _this);
                });

                function getArea(id, parent_id, _this) {
                    if(num >= 2){
                        id = '';
                    }

                    var html = '';
                    for (var i = 0, len = areaAllJson.length; i < len; i++) {
                        if (areaAllJson[i]['parent_id'] == parent_id) {

                            if (areaAllJson[i]['id'] == id) {
                                html += '<option value="' + areaAllJson[i]['id'] + '" selected>' + areaAllJson[i]['name'] + '</option>';
                            } else {
                                html += '<option value="' + areaAllJson[i]['id'] + '">' + areaAllJson[i]['name'] + '</option>';
                            }
                        }
                    }
                    
                    _this.children('option:not(:eq(0))').remove();
                    _this.append(html);
                    
                    if(num < 2){
                        if (id != '') {
                            _this.trigger('change')
                            num++;
                        }
                    }
                }

            }

            return this.each(function() {
                area();
            });

        }
    });

}(jQuery));

$(function(){
    $('[data-area="area"]').areaLinkage();
})

附件下载:https://pan.baidu.com/s/1i48zVfR 密码:4ja6

代码很简单,有些地方写的也不好,就是帮助节省重复写代码的时间,有哪些错误和建议,可以在评论里提出来

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22659.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Jonny的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!