中国省，市，区，镇/县下拉框四级联动

本文来讲一个中国省，市，区，镇/县四级下拉框联动
不同数据源操作方式不同，本文使用的递归方式，支持无限层级联动（只要数据支持）
上代码吧，没什么难度，主要是数据源的来源

 

<div id="chinaCityContainer"></div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
    $(function () {
        $('#btnTestChinaCityData').click(function () {
            testHdeviceIndexService.testChinaCityData();
            return false;
        });
    });

    var testHdeviceIndexService = {
        testChinaCityData: function () {
            //全国城市数据（缺少台湾，香港，澳门数据）
            var url = 'https://code.bdstatic.com/npm/zoningjs@2.0.19/zoning-4.json';
            $.ajax({
                url: url,
                type: 'get',
                success: function (a, b, c, d, e) {
                    testHdeviceIndexService.chinaCityData = a;
                    //初始化省数据
                    testHdeviceIndexService.init('0', -1);
                },
                error: function (a, b, c, d, e) {
                    debugger;
                    var test = null;
                }
            });
        },
        chinaCityData: null,
        //层级名称，递归时自动使用
        arrName: ['省', '市', '区', '镇'],
        init: function (id, domIndex) {
            //获取到对应的数据
            var dataList = testHdeviceIndexService.chinaCityData[id];
            if (dataList) {
                //控件索引需要+1，因为要获取到下一个控件的id
                domIndex++;
                //需要联动的下拉框dom对象
                var needUpdateDom = $('#select' + domIndex);
                //如果不存在，则需要初始化dom对象
                if (needUpdateDom.length < 1) {
                    //获取到要显示的层级名称
                    var name = domIndex < testHdeviceIndexService.arrName.length
                        ? testHdeviceIndexService.arrName[domIndex]
                        : domIndex;
                    //渲染下拉框控件
                    var selectHtml = name + '：<select id="select' + domIndex + '"></select>';
                    $('#chinaCityContainer').append(selectHtml);

                    //联动事件
                    $('#select' + domIndex).change(function () {
                        var domId = this.id;
                        //当前控件索引
                        var index = domId.substr(6);
                        //下拉框选择的值
                        var selectedValue = $(this).val();
                        //递归联动
                        testHdeviceIndexService.init(selectedValue, index);
                    });
                }

                //控件初始化完毕后（如果存在则不需要初始化）
                var selectDataHtml = testHdeviceIndexService.getSelectHtmlByDataList(dataList);
                //根据数据集合渲染联动下拉框的值
                $('#select' + domIndex).html(selectDataHtml);
            } else {
                //没有数据
                var msg = '未找到id = ' + id + '的数据';
                console.log(msg);
            }
        },
        getSelectHtmlByDataList: function (list) {
            根据数据集合获取到下拉框选项html
            if (list && list.length > 0) {
                var htmlList = ['<option value="">请选择</option>'];
                list.forEach(item => {
                    htmlList.push('<option value="' + item.id + '">' + item.text + '</option>');
                });
                return htmlList.join('');
            }
            return '';
        }

 

Ending~