省市县三级联动(1)

时间 2019-12-05

标签市县三级联动繁體版

原文原文链接

.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="select0">
        <select name="" id="p0" data-id="">
                <option value="">请选择省份</option>
        </select>
        <select name="" id="c0" data-id="">
                <option value="">请选择城市</option>            
        </select>
        <select name="" id="d0" data-id="">
                <option value="">请选择区/县</option>
        </select>
    </div>
    <div id="select1">
        <select name="" id="p1" data-id="">
                <option value="">请选择省份</option>
        </select>
        <select name="" id="c1" data-id="">
                <option value="">请选择城市</option>    
        </select>
        <select name="" id="d1" data-id="">
                <option value="">请选择区/县</option>
        </select>
    </div>
    <div id="select2">
        <select name="" id="p2" data-id="">
                <option value="">请选择省份</option>
        </select>
        <select name="" id="c2" data-id="">
                <option value="">请选择城市</option>
        </select>
        <select name="" id="d2" data-id="">
                <option value="">请选择区/县</option>
        </select>
    </div>

    <!-- 准备三个select 下拉框 -->
    <!-- 1 用一个div 包裹 -->
    <!-- 2 每个select 都须要一个id -->
    <!-- 3 每个select 都须要一个data-id -->
    <!-- 4 给每个select 一个默认值 -->
    <script src="./jquery.min.js"></script>
    <script src="./jquery.region.js"></script>
    <script>
        function Region(el) {
            $(el).region({
                url: './region.json'
            })
        }
        Region('#select0')
        Region('#select1')
        Region('#select2')
    </script>
</body>

</html>
复制代码

jquery.region.jsjquery

/**
 * 省市县联动
 * @param  {[type]} $ [description]
 * @return {[type]}   [description]
 */

(function(factory) {

    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }

}(function($) {

    $.fn.region = function(options) {

        if (!options) return;

        var parmas = [];

        $(this).find('select').each(function(key, val) {
            parmas.push($(this).attr('id') + '|' + $(this).attr('data-id'));
        });

        // 初始化参数
        var url = options.url || location.pathname,
            type = options.type || 'get',
            region = null,
            // map中的值要和region.json中的省/市/区县key保持一致
            map = ['p', 'c', 'd'];

        // 获取所有数据
        (function() {
            $.ajax({
                url: url,
                type: type,
                dataType: 'json',
                success: function(data) {
                    // var data = $.parseJSON(data);
                    if (!data) return;

                    // 将请求来的地区数据缓存到本地变量中
                    region = data;
                },
                error: function() {
                    console.log('Region error!');
                }
            });
        })();

        // 定时监听地区数据返回
        var t = setInterval(function() {
            // 数据未请求至本地
            if (!region) return;

            // 清除定时器
            clearInterval(t);

            var options = [];

            // 有默认值的状态
            for (var i = 0; i < parmas.length; i++) {
                var tmp = parmas[i].split('|');
                var o = {};

                o['el'] = tmp[0];
                o['id'] = tmp[1];
                o['pid'] = '000000'; // 省级
                o['map'] = map[i];

                if (i > 0) {
                    // 查找市/区县的父级ID
                    o['pid'] = parmas[i - 1].split('|')[1];
                }

                options.push(o);
            }

            // 遍历建立
            for (var k = 0; k < options.length; k++) {
                var curr = options[k],
                    next = options[k + 1];

                // 建立option选项
                if (region[curr['map']] && region[curr['map']][curr['pid']]) {
                    fill(curr['el'], region[curr['map']][curr['pid']], curr['id']);
                }

                // 切换选项 [缓存next]
                (function(next, k) {
                    $('#' + curr['el']).on('change', function() {
                        var _this = $(this),
                            id = _this.val();

                        if (!next) return;

                        if (region[next['map']]) {
                            fill(next['el'], region[next['map']][id] || [], '');
                        }

                        $.each(options, function(key, val) {
                            if (key > k + 1) {
                                fill(val['el'], [], '');
                            }
                        });

                    });
                })(next, k);
            }

            // 填充选项
            function fill(el, arr, id) {
                var opt = '';
                $.each(arr, function(key, val) {
                    if (key == id) {
                        opt += '<option value="' + key + '" selected>';
                    } else {
                        opt += '<option value="' + key + '">';
                    }

                    opt += val + '</option>'
                });

                $('#' + el + ' option:gt(0)').remove();
                $('#' + el).append(opt);
            }

        }, 200);
    }
}));
复制代码