省市县三级联动请求本地JSON文件

标签（空格分隔）： js

---

本地JSON，格式大概是

{
    "para": [{
            "childs": [{
                    "childs": [{
                            "childs": [],
                            "code": "110101",
                            "id": "378",
                            "name": "东城区",
                            "parentId": "33"
                        }
                        {
                            "childs": [],
                            "code": "110108",
                            "id": "385",
                            "name": "海淀区",
                            "parentId": "33"
                        },
                        {
                            "childs": [],
                            "code": "110114",
                            "id": "390",
                            "name": "昌平区",
                            "parentId": "33"
                        }
                    ],
                    "code": "110100",
                    "id": "33",
                    "name": "市辖区",
                    "parentId": "2"
                },
                {
                    "childs": [{
                            "childs": [],
                            "code": "110228",
                            "id": "394",
                            "name": "密云县",
                            "parentId": "34"
                        },
                        {
                            "childs": [],
                            "code": "110229",
                            "id": "395",
                            "name": "延庆县",
                            "parentId": "34"
                        }
                    ],
                    "code": "110200",
                    "id": "34",
                    "name": "县",
                    "parentId": "2"
                }
            ],
            "code": "110000",
            "id": "2",
            "name": "北京市",
            "parentId": "0"
        },]

使用的是nginx配置的服务器

js中ajax请求

var dataPro;
ajaxData();

//省触发加载市 data-code是省市县代码 获取方式是  eg:$("select[name='casePro']").find("option:selected").attr("data-code");
function changePro(proDom, cityDom, disDom) {
    var proNum = proDom.prop('selectedIndex');
    var optionCity = "<option value='请选择'>请选择</option>";
    disDom.html(optionCity);
    for (var m = 0; m < dataPro[proNum].childs.length; m++) {
        optionCity += "<option value='"+dataPro[proNum].childs[m].name+"' data-code='"+dataPro[proNum].childs[m].code+"'>" + dataPro[proNum].childs[m].name + "</option>";
    }
    cityDom.html(optionCity);
}
//市触发加载县
function changeCity(proDom, cityDom, disDom) {
    var proNum = proDom.prop('selectedIndex');
    var cityNum = cityDom.prop('selectedIndex') - 1; //区
    var optionDis = "<option value='请选择'>请选择</option>";
    for (var j = 0; j < dataPro[proNum].childs[cityNum].childs.length; j++) {
        optionDis += "<option value='"+dataPro[proNum].childs[cityNum].childs[j].name+"' data-code='"+dataPro[proNum].childs[cityNum].childs[j].code+"'>" + dataPro[proNum].childs[cityNum].childs[j].name + "</option>";
    }
    disDom.html(optionDis);
}
// 请求省市县数据
function ajaxData() {
    $.ajax({
        type: "get", //请求方式
        url: "../../../js/common/placecode.json", //文件位置
        dataType: "json",
        async: false, //设置异步
        success: function (data) { //请求成功
            dataPro = data.para;
        }
    })

}
//省市县三级联动  加载省的数据
function fillPro(proDom) {
    var optionPro = "<option value='请选择'>请选择</option>";
    for (var i = 0; i < dataPro.length; i++) {
        optionPro += "<option value='" + dataPro[i].name + "' data-code='" + dataPro[i].code + "'>" + dataPro[i].name + "</option>";
    }
    proDom.html(optionPro);
}

调用

 fillPro($("select[name='casePro']")); //省
// 省市县三级联动---以及code填充的加载
$("select[name='casePro']").change(function () {
    changePro($("select[name='casePro']"), $("select[name='caseCity']"), $("select[name='caseDistrict']"));
    if ($("input[name='caseNumber']")) {
        $("input[name='caseNumber']").val($("select[name='casePro']").find("option:selected").attr("data-code"));
    }
})
//给市加触发事件
$("select[name='caseCity']").change(function () {
    changeCity($("select[name='casePro']"), $("select[name='caseCity']"), $("select[name='caseDistrict']"));
    if ($("input[name='caseNumber']")) {
        $("input[name='caseNumber']").val($("select[name='caseCity']").find("option:selected").attr("data-code"));
    }
})
//给区加触发事件
$("select[name='caseDistrict']").change(function () {
    $("input[name='caseNumber']").val($("select[name='caseDistrict']").find("option:selected").attr("data-code"));
})