jq完成省市區街道四級聯動

之前看的省市區街道四級聯動的插件，感覺和公司要求的有些不符合，就自己寫了一個

因為要讀取本地json文件，所以要跑下服務器

下載browser-sync

然后在項目目錄下運行browser-sync start --server --file "**"

html

    <div>
        <div class="field">
            地址
        </div>
        <div id="area" class="field-value">
            <p>
                <select name="province">
                    <option value=""> - 請選擇 - </option>
                </select>
                <select name="city" disabled>
                    <option value=""> - 請選擇 - </option>
                </select>
                <select name="area" disabled>
                    <option value=""> - 請選擇 - </option>
                </select>
                <select name="town" disabled>
                    <option value=""> - 請選擇 - </option>
                </select>
            </p>
            <!-- <p id="place">請選擇地區</p> -->
        </div>
    </div>

css

        .field-value {
            float: left;
        }
        .field-value select {
            width: 115.5px;
            height: 35px;
            border: 1px solid #dddddd;
            font-size: 14px;
        }

        .field-value option {
            width: 117.5px;
            height: 35px;
        }

js

$(document).ready(function () {
    var $this = $("#area");
    var $province = $this.find('select[name="province"]'),
        $city = $this.find('select[name="city"]'),
        $area = $this.find('select[name="area"]'),
        $town = $this.find('select[name="town"]');
    $.getJSON("./js/city.json", function (result) {
        console.log(result)
        if (result.rc == 0) {
            var formatProvince = [], provinceField = [], currentProvince = null, cityField = [], currentCity = null, areaField = [], currentArea = null, townField = [];
            formatProvince = result.data.province_list;
            formatProvince.map(function (value, index) {
                provinceField.push(value.area_name);
            })
            var format = {
                province: function () {
                    $province.empty();
                    $province.append('<option value=""> - 請選擇 - </option>');
                    $province.prop('disabled', provinceField.length === 0);
                    for (var i in provinceField) {
                        $province.append('<option value="' + i + '" data-code="' + i + '">' + provinceField[i] + '</option>');
                    }
                    this.city();
                },
                city: function () {
                    $city.empty();
                    $city.append('<option value=""> - 請選擇 - </option>');
                    $city.prop('disabled', cityField.length === 0);
                    for (var i in cityField) {
                        $city.append('<option value="' + i + '" data-code="' + i + '">' + cityField[i] + '</option>');
                    }
                    this.area();
                },
                area: function () {
                    $area.empty();
                    $area.append('<option value=""> - 請選擇 - </option>');
                    $area.prop('disabled', areaField.length === 0);
                    for (var i in areaField) {
                        $area.append('<option value="' + i + '" data-code="' + i + '">' + areaField[i] + '</option>');
                    }
                    this.town();
                },
                town: function () {
                    $town.empty();
                    $town.append('<option value=""> - 請選擇 - </option>');
                    $town.prop('disabled', townField.length === 0);
                    for (var i in townField) {
                        $town.append('<option value="' + i + '" data-code="' + i + '">' + townField[i] + '</option>');
                    }
                }

            };

            format.province();
            //事件綁定
            $province.on('change', function () {
                currentProvince = null, cityField = [], cityId = 0, currentCity = null, areaField = [], areaId = 0, currentArea = null, townField = [], townId = 0;
                currentProvince = formatProvince[$province.find('option:selected').attr('data-code')]
                provinceId = currentProvince.area_id;
                // cityId = currentProvince.city_list[0].area_id;
                currentProvince.city_list.map(function (value, index) {
                    cityField.push(value.area_name);
                });
                format.city();
            });
            $city.on('change', function () {
                currentCity = null, areaField = [], areaId = 0, currentArea = null, townField = [], townId = 0;
                currentCity = currentProvince.city_list[$city.find('option:selected').attr('data-code')]
                cityId = currentCity.area_id;
                // areaId=currentCity.county_list[0].area_id;
                currentCity.county_list.map(function (value, index) {
                    areaField.push(value.area_name);
                });
                format.area();
            });
            $area.on('change', function () {
                areaId = 0, currentArea = null, townField = [], townId = 0;
                currentArea = currentCity.county_list[$area.find('option:selected').attr('data-code')]
                areaId = currentArea.area_id;
                // townId =currentArea.town_list[0].area_id;
                currentArea.town_list.map(function (value, index) {
                    townField.push(value.area_name);
                });
                format.town();
                // console.log(townField)
            });
            $town.on('change', function () {
                townId = currentArea.town_list[$town.find('option:selected').attr('data-code')].area_id;
            })

        }
    })
});

運行結果

github代碼：https://github.com/ouxiaojie18/-/tree/master/%E7%9C%81%E5%B8%82%E5%8C%BA%E8%A1%97%E9%81%93%E5%9B%9B%E7%BA%A7%E8%81%94%E5%8A%A8