中國省，市，區，鎮/縣下拉框四級聯動

本文來講一箇中國省，市，區，鎮/縣四級下拉框聯動
不同數據源操作方式不同，本文使用的遞歸方式，支持無限層級聯動（只要數據支持）
上代碼吧，沒什麼難度，主要是數據源的來源

 

<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/[email protected]/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~