JSON 全国省市联动

HTML

  <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="address">联系地址: </label>

                    <div class="col-sm-9">
                        <input type="hidden" id="address">
                        <select id="province" onchange="changeProvince(this.value)">
                            <option value="">省/直辖市</option>
                        </select>
                        <select id="crity" onchange="changeCity(this.value)">
                            <option value="">市/区</option>
                        </select>
                        <select id="area" onchange="changeArea(this.value)">
                            <option value="">区/县</option>
                        </select>
                        <select id="street">
                            <option value="">街道/乡/村</option>
                        </select>
                    </div>
                </div>

JS

 var province;
    $(function () {


        $.get("../../assets/json/geoinfo-all.json", function (data) {
            province = data;
            for (var i = 0; i < data.length; i++) {
                $("#province").append('<option value=' + i + '>' + data[i].name + '</option>')
            }
        });

    });


    var districts;
    function changeProvince(value) {
        if (value !== "") {
            $('#crity option').not(":first").remove();
            districts = province[value].districts;
            for (var v = 0; v < districts.length; v++) {
                $("#crity").append('<option value=' + v + '>' + districts[v].name + '</option>')
            }
        }
    };
    var area;
    function changeCity(value) {

        if (value !== "") {
            $('#area option').not(":first").remove();
            area = districts[value].districts;
            for (var v = 0; v < area.length; v++) {
                $("#area").append('<option value=' + v + '>' + area[v].name + '</option>')
            }
        }

    }
    var street;
    function changeArea(value) {

        if (value !== "") {
            $('#street option').not(":first").remove();
            street = area[value].districts;
            for (var v = 0; v < street.length; v++) {
                $("#street").append('<option value=' + v + '>' + street[v].name + '</option>')
            }
        }

    }

部分JSON

[{
    "citycode": "010",
    "adcode": "110000",
    "name": "北京市",
    "center": "116.407394,39.904211",
    "level": "province",
    "districts": [{
        "citycode": "010",
        "adcode": "110100",
        "name": "北京城区",
        "center": "116.407394,39.904211",
        "level": "city",
        "districts": [{
            "citycode": "010",
            "adcode": "110101",
            "name": "东城区",
            "center": "116.41649,39.928341",
            "level": "district",
            "districts": [{
                "citycode": "010",
                "adcode": "110101",
                "name": "崇文门外街道",
                "center": "116.427389,39.894647",
                "level": "street",
                "districts": []
            },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值