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": []
            },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤使用JSON实现省市县三级联动: 1. 准备数据 首先需要准备一份包含省市县信息的JSON数据,格式如下: ``` { "provinceList":[ { "id":"110000", "name":"北京市", "cityList":[ { "id":"110100", "name":"市辖区", "countyList":[ { "id":"110101", "name":"东城区" }, { "id":"110102", "name":"西城区" }, ... ] }, { "id":"110200", "name":"县", "countyList":[ { "id":"110228", "name":"密云县" }, { "id":"110229", "name":"延庆县" } ] } ] }, { "id":"120000", "name":"天津市", "cityList":[ { "id":"120100", "name":"市辖区", "countyList":[ { "id":"120101", "name":"和平区" }, { "id":"120102", "name":"河东区" }, ... ] }, ... ] }, ... ] } ``` 2. 加载数据 使用JavaScript的XMLHttpRequest对象或jQuery的ajax方法加载JSON数据。 ``` var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); // TODO: 处理数据 } }; xhr.send(); ``` 3. 绑定事件 绑定省、市、县三个下拉框的change事件,当省或市的值发生变化时,重新渲染市或县的下拉框。 ``` var provinceEl = document.getElementById('province'); var cityEl = document.getElementById('city'); var countyEl = document.getElementById('county'); provinceEl.addEventListener('change', function() { var provinceId = this.value; var province = data.provinceList.find(function(item) { return item.id === provinceId; }); renderCity(province.cityList); }); cityEl.addEventListener('change', function() { var cityId = this.value; var city = currentProvince.cityList.find(function(item) { return item.id === cityId; }); renderCounty(city.countyList); }); ``` 4. 渲染下拉框 根据加载的JSON数据,渲染省、市、县三个下拉框。 ``` function renderProvince(provinceList) { provinceList.forEach(function(item) { var option = document.createElement('option'); option.value = item.id; option.text = item.name; provinceEl.appendChild(option); }); } function renderCity(cityList) { cityEl.innerHTML = ''; countyEl.innerHTML = ''; currentProvince = { cityList: cityList }; cityList.forEach(function(item) { var option = document.createElement('option'); option.value = item.id; option.text = item.name; cityEl.appendChild(option); }); } function renderCounty(countyList) { countyEl.innerHTML = ''; countyList.forEach(function(item) { var option = document.createElement('option'); option.value = item.id; option.text = item.name; countyEl.appendChild(option); }); } ``` 以上就是用JSON实现省市县三级联动的基本步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值