JS代码:
var citySelect = document.getElementById("city-select");
var areaSelect = document.getElementById("area-select");
$.getJSON("/static/json/address.json", function (provinceList) {
/**
* 获取省列表
* @returns {*[]}
*/
function getProvince() {
var tempProvinceList = [provinceList.length];
for (var proIndex = 0, proSize = provinceList.length; proIndex < proSize; proIndex++) {
tempProvinceList[proIndex] = provinceList[proIndex].name;
}
return tempProvinceList;
}
/**
* 获取市列表
* @param position 省级下标
* @returns {*[]}
*/
function getCitys(position) {
var tempCityList = [provinceList[position].cityList.length];
for (var index = 0, size = provinceList[position].cityList.length; index < size; index++) {
tempCityList[index] = provinceList[position].cityList[index].name;
}
return tempCityList;
}
/**
* 获取县(区)列表
* @param position 省级下标
* @param cityPosition 市级下标
*/
function getAreas(position, cityPosition) {
return provinceList[position].cityList[cityPosition].areaList;
}
/**
* * 添加省级option
* @param position 默认选中值
* @param select 省级select
*/
function setProvinceOption(position, select) {
$(select).find("option").remove();
for (var proIndex = 0, size = getProvince().length; proIndex < size; proIndex++) {
var option = new Option(getProvince()[proIndex]);
if (proIndex === position) {
$(option).attr("selected", true);
}
$(option).val(proIndex);
$(select).append(option);
}
}
/**
* 添加市级option
* @param position 省级下标
* @param select 市级select
*/
function setCityOption(position, select) {
$(select).find("option").remove();
for (var index2 = 0, size2 = getCitys(position).length; index2 < size2; index2++) {
var option2 = new Option(getCitys(position)[index2]);
$(option2).val(index2);
$(select).append(option2)
}
}
/**
* 添加县(区)级option
* @param position 省级下标
* @param cityPosition 市级下标
* @param select 县(区)级select
*/
function setAreaOption(position, cityPosition, select) {
$(select).find("option").remove();
for (var index3 = 0, size3 = getAreas(position, cityPosition).length; index3 < size3; index3++) {
$(select).append(new Option(getAreas(position, cityPosition)[index3]))
}
}
$(provinceSelect).change(function () {
setCityOption($(this).val(), citySelect);
setAreaOption($(this).val(), 0, areaSelect)
});
$(citySelect).change(function () {
var provinceIndex = $(provinceSelect).find("option:selected").val();
setAreaOption(provinceIndex, $(this).val(), areaSelect);
});
setProvinceOption(25, provinceSelect);
setCityOption(25, citySelect);
setAreaOption(25, 0, areaSelect);
});
资源文件:address.json
[
{
"name": "北京",
"cityList": [
{
"name": "市辖区",
"areaList": [
"东城区",
"西城区",
"崇文区",
"宣武区",
"朝阳区",
"丰台区",
"石景山区",
"海淀区",
"门头沟区",
"房山区",
"通州区",
"顺义区",
"昌平区",
"大兴区",
"怀柔区",
"平谷区"
]
},
{
"name": "县",
"areaList": [
"密云县",
"延庆县"
]
}
]
},
{
"name": "上海",
"cityList": [
{
"name": "市辖区",
"areaList": [
"黄浦区",
"卢湾区",
"徐汇区",
"长宁区",
"静安区",
"普陀区",
"闸北区",
"虹口区",
"杨浦区",
"闵行区",
"宝山区",
"嘉定区",
"浦东新区",
"金山区",
"松江区",
"青浦区",
"南汇区",
"奉贤区"
]
},
{
"name": "县",
"areaList": [
"崇明县"
]
}
]
},
{
"name": "天津",
"cityList": [
{
"name": "市辖区",
"areaList": [
"和平区",
"河东区",
"河西区",
"南开区",
"河北区",
"红桥区",
"塘沽区",
"汉沽区",
"大港区",
"东丽区",
"西青区",
"津南区",
"北辰区",
"武清区",
"宝坻区"
]
},
{
"name": "县",
"areaList": [
"宁河县",
"静海县",
"蓟 县"
]
}
]
},
{
"name": "重庆",
"cityList": [
{
"name": "市辖区",
"areaList": [
"万州区",
"涪陵区",
"渝中区",
"大渡口区",
"江北区",
"沙坪坝区",
"九龙坡区",
"南岸区",
"北碚区",
"万盛区",
"双桥区",
"渝北区",
"巴南区",
"黔江区",
"长寿区"
]
},
{
"name": "县",
"areaList": [
"綦江县",
"潼南县",
"铜梁县",
"大足县",
"荣昌县",
"璧山县",
"梁平县",
"城口县",
"丰都县",
"垫江县",
"武隆县",
"忠 县",
"开 县",
"云阳县",
"奉节县",
"巫山县",
"巫溪县",
"石柱土家族自治县",
"秀山土家族苗族自治县",
"酉阳土家族苗族自治县",
"彭水苗族土家族自治县"
]
},
{
"name": "市",
"areaList": [
"江津市",
"合川市",
"永川市",
"南川市"
]
}
]
},
{
"name": "四川",
"cityList": [
{
"name": "成都市",
"areaList": [
"市辖区",
"锦江区",
"青羊区",
"金牛区",
"武侯区",
"成华区",
"龙泉驿区",
"青白江区",
"新都区",
"温江县",
"金堂县",
"双流县",
"郫 县",
"大邑县",
"蒲江县",
"新津县",
"都江堰市",
"彭州市",
"邛崃市",
"崇州市"
]
},
{
"name": "自贡市",
"areaList": [
"市辖区",
"自流井区",
"贡井区",
"大安区",
"沿滩区",
"荣 县",
"富顺县"
]
},
{
"name": "攀枝花市",
"areaList": [
"市辖区",
"东 区",
"西 区",
"仁和区",
"米易县",
"盐边县"
]
},
{
"name": "泸州市",
"areaList": [
"市辖区",
"江阳区",
"纳溪区",
"龙马潭区",
"泸 县",
"合江县",
"叙永县",
"古蔺县"
]
},
{
"name": "德阳市",
"areaList": [
"市辖区",
"旌阳区",
"中江县",
"罗江县",
"广汉市",
"什邡市",
"绵竹市"
]
},
{
"name": "绵阳市",
"areaList": [
"市辖区",
"涪城区",
"游仙区",
"三台县",
"盐亭县",
"安 县",
"梓潼县",
"北川羌族自治县",
"平武县",
"江油市"
]
},
{
"name": "广元市",
"areaList": [
"市辖区",
"市中区",
"元坝区",
"朝天区",
"旺苍县",
"青川县",
"剑阁县",
"苍溪县"
]
},
{
"name": "遂宁市",
"areaList": [
"市辖区",
"船山区",
"安居区",
"蓬溪县",
"射洪县",
"大英县"
]
},
{
"name": "内江市",
"areaList": [
"市辖区",
"市中区",
"东兴区",
"威远县",
"资中县",
"隆昌县"
]
},
{
"name": "乐山市",
"areaList": [
"市辖区",
"市中区",
"沙湾区",
"五通桥区",
"金口河区",
"犍为县",
"井研县",
"夹江县",
"沐川县",
"峨边彝族自治县",
"马边彝族自治县",
"峨眉山市"
]
},
{
"name": "南充市",
"areaList": [
"市辖区",
"顺庆区",
"高坪区",
"嘉陵区",
"南部县",
"营山县",
"蓬安县",
"仪陇县",
"西充县",
"阆中市"
]
},
{
"name": "眉山市",
"areaList": [
"市辖区",
"东坡区",
"仁寿县",
"彭山县",
"洪雅县",
"丹棱县",
"青神县"
]
},
{
"name": "宜宾市",
"areaList": [
"市辖区",
"翠屏区",
"宜宾县",
"南溪县",
"江安县",
"长宁县",
"高 县",
"珙 县",
"筠连县",
"兴文县",
"屏山县"
]
},
{
"name": "广安市",
"areaList": [
"市辖区",
"广安区",
"岳池县",
"武胜县",
"邻水县",
"华莹市"
]
},
{
"name": "达州市",
"areaList": [
"市辖区",
"通川区",
"达 县",
"宣汉县",
"开江县",
"大竹县",
"渠 县",
"万源市"
]
},
{
"name": "雅安市",
"areaList": [
"市辖区",
"雨城区",
"名山县",
"荥经县",
"汉源县",
"石棉县",
"天全县",
"芦山县",
"宝兴县"
]
},
{
"name": "巴中市",
"areaList": [
"市辖区",
"巴州区",
"通江县",
"南江县",
"平昌县"
]
},
{
"name": "资阳市",
"areaList": [
"市辖区",
"雁江区",
"安岳县",
"乐至县",
"简阳市"
]
},
{
"name": "阿坝藏族羌族自治州",
"areaList": [
"汶川县",
"理 县",
"茂 县",
"松潘县",
"九寨沟县",
"金川县",
"小金县",
"黑水县",
"马尔康县",
"壤塘县",
"阿坝县",
"若尔盖县",
"红原县"
]
},
{
"name": "甘孜藏族自治州",
"areaList": [
"康定县",
"泸定县",
"丹巴县",
"九龙县",
"雅江县",
"道孚县",
"炉霍县",
"甘孜县",
"新龙县",
"德格县",
"白玉县",
"石渠县",
"色达县",
"理塘县",
"巴塘县",
"乡城县",
"稻城县",
"得荣县"
]
},
{
"name": "凉山彝族自治州",
"areaList": [
"西昌市",
"木里藏族自治县",
"盐源县",
"德昌县",
"会理县",
"会东县",
"宁南县",
"普格县",
"布拖县",
"金阳县",
"昭觉县",
"喜德县",
"冕宁县",
"越西县",
"甘洛县",
"美姑县",
"雷波县"
]
}
]
},
{
"name": "贵州",
"cityList": [
{
"name": "贵阳市",
"areaList": [
"市辖区",
"南明区",
"云岩区",
"花溪区",
"乌当区",
"白云区",
"小河区",
"开阳县",
"息烽县",
"修文县",
"清镇市"
]
},
{
"name": "六盘水市",
"areaList": [
"钟山区",
"六枝特区",
"水城县",
"盘 县"
]
},
{
"name": "遵义市",
"areaList": [
"市辖区",
"红花岗区",
"汇川区",
"遵义县",
"桐梓县",
"绥阳县",
"正安县",
"道真仡佬族苗族自治县",
"务川仡佬族苗族自治县",
"凤冈县",
"湄潭县",
"余庆县",
"习水县",
"赤水市",
"仁怀市"
]
},
{
"name": "安顺市",
"areaList": [
"市辖区",
"西秀区",
"平坝县",
"普定县",
"镇宁布依族苗族自治县",
"关岭布依族苗族自治县",
"紫云苗族布依族自治县"
]
},
{
"name": "铜仁地区",
"areaList": [
"铜仁市",
"江口县",
"玉屏侗族自治县",
"石阡县",
"思南县",
"印江土家族苗族自治县",
"德江县",
"沿河土家族自治县",
"松桃苗族自治县",
"万山特区"
]
},
{
"name": "黔西南布依族苗族自治州",
"areaList": [
"兴义市",
"兴仁县",
"普安县",
"晴隆县",
"贞丰县",
"望谟县",
"册亨县",
"安龙县"
]
},
{
"name": "毕节地区",
"areaList": [
"毕节市",
"大方县",
"黔西县",
"金沙县",
"织金县",
"纳雍县",
"威宁彝族回族苗族自治县",
"赫章县"
]
},
{
"name": "黔东南苗族侗族自治州",
"areaList": [
"凯里市",
"黄平县",
"施秉县",
"三穗县",
"镇远县",
"岑巩县",
"天柱县",
"锦屏县",
"剑河县",
"台江县",
"黎平县",
"榕江县",
"从江县",
"雷山县",
"麻江县",
"丹寨县"
]
},
{
"name": "黔南布依族苗族自治州",
"areaList": [
"都匀市",
"福泉市",
"荔波县",
"贵定县",
"瓮安县",
"独山县",
"平塘县",
"罗甸县",
"长顺县",
"龙里县",
"惠水县",
"三都水族自治县"
]
}
]
},
{
"name": "云南",
"cityList": [
{
"name": "昆明市",
"areaList": [
"市辖区",
"五华区",
"盘龙区",
"官渡区",
"西山区",
"东川区",
"呈贡县",
"晋宁县",
"富民县",
"宜良县",
"石林彝族自治县",
"嵩明县",
"禄劝彝族苗族自治县",
"寻甸回族彝族自治县",
"安宁市"
]
},
{
"name": "曲靖市",
"areaList": [
"市辖区",
"麒麟区",
"马龙县",
"陆良县",
"师宗县",
"罗平县",
"富源县",
"会泽县",
"沾益县",
"宣威市"
]
},
{
"name": "玉溪市",
"areaList": [
"市辖区",
"红塔区",
"江川县",
"澄江县",
"通海县",
"华宁县",
"易门县",
"峨山彝族自治县",
"新平彝族傣族自治县",
"元江哈尼族彝族傣族自治县"
]
},
{
"name": "保山市",
"areaList": [
"市辖区",
"隆阳区",
"施甸县",
"腾冲县",
"龙陵县",
"昌宁县"
]
},
{
"name": "昭通市",
"areaList": [
"市辖区",
"昭阳区",
"鲁甸县",
"巧家县",
"盐津县",
"大关县",
"永善县",
"绥江县",
"镇雄县",
"彝良县",
"威信县",
"水富县"
]
},
{
"name": "丽江市",
"areaList": [
"市辖区",
"古城区",
"玉龙纳西族自治县",
"永胜县",
"华坪县",
"宁蒗彝族自治县"
]
},
{
"name": "思茅市",
"areaList": [
"市辖区",
"翠云区",
"普洱哈尼族彝族自治县",
"墨江哈尼族自治县",
"景东彝族自治县",
"景谷傣族彝族自治县",
"镇沅彝族哈尼族拉祜族自治县",
"江城哈尼族彝族自治县",
"孟连傣族拉祜族佤族自治县",
"澜沧拉祜族自治县",
"西盟佤族自治县"
]
},
{
"name": "临沧市",
"areaList": [
"市辖区",
"临翔区",
"凤庆县",
"云 县",
"永德县",
"镇康县",
"双江拉祜族佤族布朗族傣族自治县",
"耿马傣族佤族自治县",
"沧源佤族自治县"
]
},
{
"name": "楚雄彝族自治州",
"areaList": [
"楚雄市",
"双柏县",
"牟定县",
"南华县",
"姚安县",
"大姚县",
"永仁县",
"元谋县",
"武定县",
"禄丰县"
]
},
{
"name": "红河哈尼族彝族自治州",
"areaList": [
"个旧市",
"开远市",
"蒙自县",
"屏边苗族自治县",
"建水县",
"石屏县",
"弥勒县",
"泸西县",
"元阳县",
"红河县",
"金平苗族瑶族傣族自治县",
"绿春县",
"河口瑶族自治县"
]
},
{
"name": "文山壮族苗族自治州",
"areaList": [
"文山县",
"砚山县",
"西畴县",
"麻栗坡县",
"马关县",
"丘北县",
"广南县",
"富宁县"
]
},
{
"name": "西双版纳傣族自治州",
"areaList": [
"景洪市",
"勐海县",
"勐腊县"
]
},
{
"name": "大理白族自治州",
"areaList": [
"大理市",
"漾濞彝族自治县",
"祥云县",
"宾川县",
"弥渡县",
"南涧彝族自治县",
"巍山彝族回族自治县",
"永平县",
"云龙县",
"洱源县",
"剑川县",
"鹤庆县"
]
},
{
"name": "德宏傣族景颇族自治州",
"areaList": [
"瑞丽市",
"潞西市",
"梁河县",
"盈江县",
"陇川县"
]
},
{
"name": "怒江傈僳族自治州",
"areaList": [
"泸水县",
"福贡县",
"贡山独龙族怒族自治县",
"兰坪白族普米族自治县"
]
},
{
"name": "迪庆藏族自治州",
"areaList": [
"香格里拉县",
"德钦县",
"维西傈僳族自治县"
]
}
]
},
{
"name": "西藏",
"cityList": [
{
"name": "拉萨市",
"areaList": [
"市辖区",
"城关区",
"林周县",
"当雄县",
"尼木县",
"曲水县",
"堆龙德庆县",
"达孜县",
"墨竹工卡县"
]
},
{
"name": "昌都地区",
"areaList": [
"昌都县",
"江达县",
"贡觉县",
"类乌齐县",
"丁青县",
"察雅县",
"八宿县",
"左贡县",
"芒康县",
"洛隆县",
"边坝县"
]
},
{
"name": "山南地区",
"areaList": [
"乃东县",
"扎囊县",
"贡嘎县",
"桑日县",
"琼结县",
"曲松县",
"措美县",
"洛扎县",
"加查县",
"隆子县&#
最低0.47元/天 解锁文章
1277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
