Jquery省市县三级联动,数据来源js，无需调用接口
可前往本人发布资源《Jquery省市县三级》免积分下载
目录
效果
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script src="./city.js"></script>
<style>
select{
width: 100px;
height: 30px;
}
</style>
</head>
<body>
所在省
<select name="" id="province">
<option>请选择</option>
</select>
所在市
<select name="" id="cityname">
<option>请选择</option>
</select>
所在区/县
<select name="" id="county">
<option>请选择</option>
</select>
</body>
<script>
$(function () {
//省
var province = '<option>请选择</option>';
$.each(city_data, function (i, n) {
province += '<option>' + i + '</option>';
})
$('#province').html(province);
var text;
var get_county;
//市
$("#province").change(function () {
get_county = '';
var city = '';
text = $("#province").val();//将select内的内容保存到变量text中
city = '<option>请选择</option>';
if (text != '请选择') {
$.each(city_data[text], function (i, n) {
city += ' <option>' + i + '</option>';
})
//县
$("#cityname").change(function () {
get_county = city_data[text];
var county = '';
var info = $("#cityname").val();//将select内的内容保存到变量info中
county = '<option>请选择</option>';
if (info != '请选择') {
$.each(get_county[info], function (i, n) {
county += ' <option>' + n + '</option>';
})
}
$('#county').html(county);
})
}
$('#cityname').html(city);
$('#county').html(' <option>请选择</option>');
})
})
</script>
</html>
引入的JS文件代码，比较长建议去本人发布资源处下载
var city_data = {
"北京市":{
"北京市": [
"东城区",
"西城区",
"崇文区",
"宣武区",
"朝阳区",
"丰台区",
"石景山区",
"海淀区",
"门头沟区",
"房山区",
"通州区",
"顺义区",
"昌平区",
"大兴区",
"平谷区",
"怀柔区",
"密云县",
"延庆县"
]
},
"天津市": {
"天津市": [
"和平区",
"河东区",
"河西区",
"南开区",
"河北区",
"红桥区",
"塘沽区",
"汉沽区",
"大港区",
"东丽区",
"西青区",
"津南区",
"北辰区",
"武清区",
"宝坻区",
"宁河县",
"静海县",
"蓟县"
]
},
"河北省": {
"石家庄市": [
"长安区",
"桥东区",
"桥西区",
"新华区",
"井陉矿区",
"井陉县",
"正定县",
"栾城县",
"行唐县",
"灵寿县",
"高邑县",
"深泽县",
"赞皇县",
"无极县",
"平山县",
"元氏县",
"赵县",
"辛集市",
"藁城",
"晋州市",
"新乐市",
"鹿泉市"
],
"唐山市": [
"路南区",
"路北区",
"古冶区",
"开平区",
"新区",
"丰润县",
"滦县",
"滦南县",
"乐亭县",
"迁西县",
"玉田县",
"唐海县",
"遵化市",
"丰南市",
"迁安市"
],
"秦皇岛市": [
"海港区",
"山海关区",
"北戴河区",
"青龙满族自治县",
"昌黎县",
"抚宁县",
"卢龙县"
],
"邯郸市": [
"邯山区",
"丛台区",
"复兴区",
"峰峰矿区",
"邯郸县",
"临漳县",
"成安县",
"大名县",
"涉县",
"磁县",
"肥乡县",
"永年县",
"邱县",
"鸡泽县",
"广平县",
"馆陶县",
"魏县",
"曲周县",
"武安市"
],
"邢台市": [
"桥东区",
"桥西区",
"邢台县",
"临城县",
"内丘县",
"柏乡县",
"隆尧县",
"任县",
"南和县",
"宁晋县",
"巨鹿县",
"新河县",
"广宗县",
"平乡县",
"威县",
"清河县",
"临西县",
"南宫市",
"沙河市"
],
"保定市": [
"新市区",
"北市区",
"南市区",
"满城县",
"清苑县",
"涞水县",
"阜平县",
"徐水县",
"定兴县",
"唐县",
"高阳县",
"容城县",
"涞源县",
"望都县",
"安新县",
"易县",
"曲阳县",
"蠡县",
"顺平县",
"博野",
"雄县",
"涿州市",
"定州市",
"安国市",
"高碑店市"
],
"张家口": [
"桥东区",
"桥西区",
"宣化区",
"下花园区",
"宣化县",
"张北县",
"康保县",
"沽源县",
"尚义县",
"蔚县",
"阳原县",
"怀安县",
"万全县",
"怀来县",
"涿鹿县",
"赤城县",
"崇礼县"
],
"承德市": [
"双桥区",
"双滦区",
"鹰手营子矿区",
"承德县",
"兴隆县",
"平泉县",
"吴桥县",
"滦平县",
"隆化县",
"丰宁满族自治县",
"宽城满族自治县",
"围场满族蒙古族自治县"
],
"沧州市": [
"新华区",
"运河区",
"沧县",
"青县",
"东光县",
"海兴县",
"盐山县",
"肃宁县",
"南皮县",
"献县",
"孟村回族自治县",
"泊头市",
"任丘市",
"黄骅市",
"河间市"
],
"廊坊市": [
"安次区",
"固安县",
"永清县",
"香河县",
"大城县",
"文安县",
"大厂回族自治县",
"霸州市",
"三河市"
],
"衡水市": [
"桃城区",
"枣强县",
"武邑县",
"武强县",
"饶阳县",
"安平县",
"故城县",
"景县",
"阜城县",
"冀州市",
"深州市"
]
},
"山西省": {
"太原市": [
"小店区",
"迎泽区",
"杏花岭区",
"尖草坪区",
"万柏林区",
"晋源区",
"清徐县",
"阳曲县",
"娄烦县",
"古交市"
],
"大同市": [
"南郊区",
"新荣区",
"阳高县",
"天镇县",
"广灵县",
"灵丘县",
"浑源县",
"左云县",
"大同县"
],
"阳泉市": [
"平定县",
"盂县"
],
"长治市": [
"长治县",
"襄垣县",
"屯留县",
"平顺县",
"黎城县",
"壶关县",
"长子县",
"武乡县",
"沁县",
"沁源县",
"潞城市"
],
"晋城市": [
"沁水县",
"阳城县",
"陵川县",
"泽州县",
"高平市"
],
"朔州市": [
"朔城区",
"平鲁区",
"山阴县",
"应县",
"右玉县",
"怀仁县"
],
"忻州市": [
"忻府区",
"原平市",
"定襄县",
"五台县",
"代县",
"繁峙县",
"宁武县",
"静乐县",
"神池县",
"五寨县",
"岢岚县",
"河曲县",
"保德县",
"偏关县"
],
"吕梁市": [
"离石区",
"孝义市",
"汾阳市",
"文水县",
"交城县",
"兴县",
"临县",
"柳林县",
"石楼县",
"岚县",
"方山县",
"中阳县",
"交口县"
],
"晋中市": [
"榆次市",
"介休市",
"榆社县",
"左权县",
"和顺县",
"昔阳县",
"寿阳县",
"太谷县",
"祁县",
"平遥县",
"灵石县"
],
"临汾市": [
"临汾市",
"侯马市",
"霍州市",
"曲沃县",
"翼城县",
"襄汾县",
"洪洞县",
"古县",
"安泽县",
"浮山县",
"吉县",
"乡宁县",
"蒲县",
"大宁县",
"永和县",
"隰县",
"汾西县"
],
"运城市": [
"运城市",
"永济市",
"河津市",
"芮城县",
"临猗县",
"万荣县",
"新绛县",
"稷山县",
"闻喜县",
"夏县",
"绛县",
"平陆县",
"垣曲县"
]
},
"内蒙古": {
"呼和浩特市": [
"新城区",
"回民区",
"玉泉区",
"土默特左旗",
"托克托县",
"和林格尔县",
"清水河县",
"武川县"
],
"包头市": [
"东河区",
"昆都伦区",
"青山区",
"石拐矿区",
"白云矿区",
"土默特右旗",
"固阳县",
"达尔罕茂明安联合旗"
],
"乌海市": [
"海勃湾区",
"海南区",
"乌达区"
],
"赤峰市": [
"红山区",
"元宝山区",
"松山区",
"阿鲁科尔沁旗",
"巴林左旗",
"巴林右旗",
"林西县",
"克什克腾旗",
"翁牛特旗",
"喀喇沁旗",
"宁城县",
"敖汉旗"
],
"呼伦贝尔市": [
"海拉尔市",
"满洲里市",
"扎兰屯市",
"牙克石市",
"根河市",
"额尔古纳市",
"阿荣旗",
"莫力达瓦达斡尔族自治旗",
"鄂伦春自治旗",
"鄂温克族自治旗",
"新巴尔虎右旗",
"新巴尔虎左旗",
"陈巴尔虎旗"
],
"兴安盟": [
"乌兰浩特市",
"阿尔山市",
"科尔沁右翼前旗",
"科尔沁右翼中旗",
"扎赉特旗",
"突泉县"
],
"通辽市": [
"科尔沁区",
"霍林郭勒市",
"科尔沁左翼中旗",
"科尔沁左翼后旗",
"开鲁县",
"库伦旗",
"奈曼旗",
"扎鲁特旗"
],
"锡林郭勒盟": [
"二连浩特市",
"锡林浩特市",
"阿巴嘎旗",
"苏尼特左旗",
"苏尼特右旗",
"东乌珠穆沁旗",
"西乌珠穆沁旗",
"太仆寺旗",
"镶黄旗",
"正镶白旗",
"正蓝旗",
"多伦县"
],
"乌兰察布盟": [
"集宁市",
"丰镇市",
"卓资县",
"化德县",
"商都县",
"兴和县",
"凉城县",
"察哈尔右翼前旗",
"察哈尔右翼中旗",
"察哈尔右翼后旗",
"四子王旗"
],
"伊克昭盟": [
"东胜市",
"达拉特旗",
"准格尔旗",
"鄂托克前旗",
"鄂托克旗",
"杭锦旗",
"乌审旗",
"伊金霍洛旗"
],
"巴彦淖尔盟": [
"临河市",
"五原县",
"磴口县",
"乌拉特前旗",
"乌拉特中旗",
"乌拉特后旗",
"杭锦后旗"
],
"阿拉善盟": [
"阿拉善左旗",
"阿拉善右旗",
"额济纳旗"
]
},
"辽宁省": {
"沈阳市": [
"沈河区",
"皇姑区",
"和平区",
"大东区",
"铁西区",
"苏家屯区",
"东陵区",
"于洪区",
"新民市",
"法库县",
"辽中县",
"康平县",
"新城子区"
],
"大连市": [
"西岗区",
"中山区",
"沙河口区",
"甘井子区",
"旅顺口区",
"金州区",
"瓦房店市",
"普兰店市",
"庄河市",
"长海县"
],
"鞍山市": [
"铁东区",
"铁西区",
"立山区",
"千山区",
"海城市",
"台安县",
"岫岩满族自治县"
],
"抚顺市": [
"顺城区",
"新抚区",
"东洲区",
"望花区",
"抚顺县",
"清原满族自治县",
"新宾满族自治县"
],
"本溪市": [
"平山区",
"明山区",
"溪湖区",
"南芬区",
"本溪满族自治县",
"桓仁满族自治县"
],
"丹东市": [
"振兴区",
"元宝区",
"振安区",
"东港市",
"凤城市",
"宽甸满族自治县"
],
"锦州市": [
"太和区",
"古塔区",
"凌河区",
"凌海市",
"黑山县",
"义县",
"北宁市"
],
"营口市": [
"站前区",
"西市区",
"鲅鱼圈区",
"老边区",
"大石桥市",
"盖州市"
],
"阜新市": [
"海州区",
"新邱区",
"太平区",
"清河门区",
"细河区",
"彰武县",
"阜新蒙古族自治县"
],
"辽阳市": [
"白塔区",
"文圣区",
"宏伟区",
"太子河区",
"弓长岭区",
"灯塔市",
"辽阳县"
],
"盘锦": [
"双台子区",
"兴隆台区",
"盘山县",
"大洼县"
],
"铁岭市": [
"银州区",
"清河区",
"调兵山市",
"开原市",
"铁岭县",
"昌图县",
"西丰县"
],
"朝阳市": [
"双塔区",
"龙城区",
"凌源市",
"北票市",
"朝阳县",
"建平县",
"喀喇沁左翼蒙古族自治县"
],
"葫芦岛市": [
"龙港区",
"南票区",
"连山区",
"兴城市",
"绥中县",
"建昌县"
最低0.47元/天 解锁文章
扫一扫
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
