HTML代码：
省：<select id="city_1">
<option>—请选择—</option>
</select>
市：
<select id="city_2">
<option>—请选择—</option>
</select>
区：
<select id="city_3">
<option>—请选择—</option>
</select>JS代码：
var Data = city[0];
var city1 = document.getElementById("city_1");
var city2 = document.getElementById("city_2");
var city3 = document.getElementById("city_3");
for (var key in Data) {
/*var op=document.createElement("option");
op.innerHTML=Data[key].name;
op.setAttribute("value",1);
city1.appendChild(op);*/
var op = new Option(Data[key].name, key);
city1.appendChild(op);
}
/*onchange 文本发生变化事件*/
var child;
city1.onchange=function (){
city2.options.length=1;
city3.options.length=1;
var citynumber1=this.value;
child=Data[citynumber1].child;
for(var key in child){
var op=new Option(child[key].name,key);
city2.appendChild(op);
}
}
city2.onchange=function (){
city3.options.length=1;
var citynumber2=this.value;
var childData=child[citynumber2];
for(var key in childData.child){
var op=new Option(childData.child[key],key);
city3.appendChild(op);
}
}cityData的数据格式（如下，山西省的例子）：
var city = [
{
"140000": {
"name": "山西省",
"child": {
"140100": {
"name": "太原市",
"child": {
"140101": "市辖区",
"140105": "小店区",
"140106": "迎泽区",
"140107": "杏花岭区",
"140108": "尖草坪区",
"140109": "万柏林区",
"140110": "晋源区",
"140121": "清徐县",
"140122": "阳曲县",
"140123": "娄烦县",
"140181": "古交市"
}
},
"140200": {
"name": "大同市",
"child": {
"140201": "市辖区",
"140202": "城区",
"140203": "矿区",
"140211": "南郊区",
"140212": "新荣区",
"140221": "阳高县",
"140222": "天镇县",
"140223": "广灵县",
"140224": "灵丘县",
"140225": "浑源县",
"140226": "左云县",
"140227": "大同县"
}
},
"140300": {
"name": "阳泉市",
"child": {
"140301": "市辖区",
"140302": "城区",
"140303": "矿区",
"140311": "郊区",
"140321": "平定县",
"140322": "盂县"
}
},
"140400": {
"name": "长治市",
"child": {
"140401": "市辖区",
"140402": "城区",
"140411": "郊区",
"140421": "长治县",
"140423": "襄垣县",
"140424": "屯留县",
"140425": "平顺县",
"140426": "黎城县",
"140427": "壶关县",
"140428": "长子县",
"140429": "武乡县",
"140430": "沁县",
"140431": "沁源县",
"140481": "潞城市"
}
},
"140500": {
"name": "晋城市",
"child": {
"140501": "市辖区",
"140502": "城区",
"140521": "沁水县",
"140522": "阳城县",
"140524": "陵川县",
"140525": "泽州县",
"140581": "高平市"
}
},
"140600": {
"name": "朔州市",
"child": {
"140601": "市辖区",
"140602": "朔城区",
"140603": "平鲁区",
"140621": "山阴县",
"140622": "应县",
"140623": "右玉县",
"140624": "怀仁县"
}
},
"140700": {
"name": "晋中市",
"child": {
"140701": "市辖区",
"140702": "榆次区",
"140721": "榆社县",
"140722": "左权县",
"140723": "和顺县",
"140724": "昔阳县",
"140725": "寿阳县",
"140726": "太谷县",
"140727": "祁县",
"140728": "平遥县",
"140729": "灵石县",
"140781": "介休市"
}
},
"140800": {
"name": "运城市",
"child": {
"140801": "市辖区",
"140802": "盐湖区",
"140821": "临猗县",
"140822": "万荣县",
"140823": "闻喜县",
"140824": "稷山县",
"140825": "新绛县",
"140826": "绛县",
"140827": "垣曲县",
"140828": "夏县",
"140829": "平陆县",
"140830": "芮城县",
"140881": "永济市",
"140882": "河津市"
}
},
"140900": {
"name": "忻州市",
"child": {
"140901": "市辖区",
"140902": "忻府区",
"140921": "定襄县",
"140922": "五台县",
"140923": "代县",
"140924": "繁峙县",
"140925": "宁武县",
"140926": "静乐县",
"140927": "神池县",
"140928": "五寨县",
"140929": "岢岚县",
"140930": "河曲县",
"140931": "保德县",
"140932": "偏关县",
"140981": "原平市"
}
},
"141000": {
"name": "临汾市",
"child": {
"141001": "市辖区",
"141002": "尧都区",
"141021": "曲沃县",
"141022": "翼城县",
"141023": "襄汾县",
"141024": "洪洞县",
"141025": "古县",
"141026": "安泽县",
"141027": "浮山县",
"141028": "吉县",
"141029": "乡宁县",
"141030": "大宁县",
"141031": "隰县",
"141032": "永和县",
"141033": "蒲县",
"141034": "汾西县",
"141081": "侯马市",
"141082": "霍州市"
}
},
"141100": {
"name": "吕梁市",
"child": {
"141101": "市辖区",
"141102": "离石区",
"141121": "文水县",
"141122": "交城县",
"141123": "兴县",
"141124": "临县",
"141125": "柳林县",
"141126": "石楼县",
"141127": "岚县",
"141128": "方山县",
"141129": "中阳县",
"141130": "交口县",
"141181": "孝义市",
"141182": "汾阳市"
}
}
}
},
}
]
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
