jquery 三级联动，json格式保存省市区

省市区js下载

 

$(document).ready(function() {

    $("#areaProvince").change(function() {
        LoadCity();
        LoadCounty();
    });

    $("#areaCity").change(function() {
        LoadCounty();
    });

        LoadArea('', '', '');
});

function LoadArea(prov, city, County) {
    LoadProvince(prov);
    LoadCity(city);
    LoadCounty(County);

}
function LoadProvince(values) {
    $("#areaProvince").empty();
    for (var id in countryAreaData) {

        $("#areaProvince").append(" <option value='" + id + "'>" + id + "</option>");

    }
    if (typeof(values) == "string") {
        $("#areaProvince option[value=" + values + "]").attr("selected", true)

    }
}
function LoadCity(values) {
    $("#areaCity").empty();
    $("#areaCounty").empty();
    var s1 = $("#areaProvince option:selected").val();
    for (var id2 in countryAreaData[s1]) {

        $("#areaCity").append(" <option value='" + id2 + "'>" + id2 + "</option>");
    }
    if (typeof(values) == "string") {
        $("#areaCity option[value=" + values + "]").attr("selected", true)

    }
}
function LoadCounty(values) {
    $("#areaCounty").empty();
    var str1 = $("#areaProvince option:selected").val();
    var str2 = $("#areaCity option:selected").val();

    for (i = 0; i < countryAreaData[str1][str2].length; i++) {
        str = countryAreaData[str1][str2][i];

        $("#areaCounty").append(" <option value='" + str + "'>" + str + "</option>");

    }
    if (typeof(values) == "string") {
        $("#areaCounty option[value=" + values + "]").attr("selected", true)

    }
}

 

 

<!--选择城市功能      star      -->
<select id="areaProvince" name="areaProvince" style="width: 100px">
    <option value="0">省份</option>
</select>
<select id="areaCity" name="areaCity" style="width: 120px">
    <option value="0">地级市</option>
</select>
<select id="areaCounty" name="areaCounty" style="width: 120px">
    <option value="0">市县</option>
</select>
<!--选择城市功能      end      -->