纯JS省市区三级联动（行政区划代码更新至2015-9-30）

最新推荐文章于 2025-03-20 15:38:01 发布

江三疯

最新推荐文章于 2025-03-20 15:38:01 发布

阅读量2.3w

点赞数 5

文章标签： javascript csdn博客

本文链接：https://blog.csdn.net/u012916555/article/details/52964868

版权

本文代码实现的功能是省市区三级联动下拉列表，纯Javascript，网上已有很多这方面的代码。但是作为一个新手，这是我的第一篇CSDN博客，发此文的目的主要是学习交流，希望看到的朋友发现有什么不对的地方批评指正一下。
整体的实现思路是：1、创建一个"place类"，给这个类增加"地名"，"地区编码"等属性，增加"返回代表省的前两位数字"，"返回代表市的前四位数字"，"判断地区类型"等方法；2、创建一个包含全国地名数据的Json对象；3、创建三个数组，分别代表所有的省市区，通过遍历包含地名数据的Json，并通过判断地区类型，把生成的place对象归类到这三个数组，并初始化下拉列表选项；4、创建一个selectChange函数，当下拉列表发生改变时执行这个函数，更新下拉列表选项。
地名数据来自从国家统计局官网(http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html)，可以用Excel拼接字符串的方式快速转化为一个Json对象，实现的功能比较简陋，也就不按照结构、行为、表现分离的原则来写了。下面贴上代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	select{ width:100px; text-align:center;}
</style>
<script type="text/javascript">
   /*这是从国家统计局网站下载的全国行政区划代码，数据更新至2015-9-30，我把他转化为JSON对象，然后定义了一个place类，通过遍历这个JSON把所有地区都转化为place对象。然后通过判断地区编码的特征，把所有place对象归类到三个数组里面，分别代表省级地区、市级地区、县级地区*/
	var placesMap={"110000":"北京市","110100":"市辖区","110101":"东城区","110102":"西城区","110105":"朝阳区","110106":"丰台区","110107":"石景山区","110108":"海淀区","110109":"门头沟区","110111":"房山区","110112":"通州区","110113":"顺义区","110114":"昌平区","110115":"大兴区","110116":"怀柔区","110117":"平谷区","110200":"县","110228":"密云县","110229":"延庆县","120000":"天津市","120100":"市辖区","120101":"和平区","120102":"河东区","120103":"河西区","120104":"南开区","120105":"河北区","120106":"红桥区","120110":"东丽区","120111":"西青区","120112":"津南区","120113":"北辰区","120114":"武清区","120115":"宝坻区","120116":"滨海新区","120117":"宁河区","120118":"静海区","120200":"县","120225":"蓟县","130000":"河北省","130100":"石家庄市","130101":"市辖区","130102":"长安区","130104":"桥西区","130105":"新华区","130107":"井陉矿区","130108":"裕华区","130109":"藁城区","130110":"鹿泉区","130111":"栾城区","130121":"井陉县","130123":"正定县","130125":"行唐县","130126":"灵寿县","130127":"高邑县","130128":"深泽县","130129":"赞皇县","130130":"无极县","130131":"平山县","130132":"元氏县","130133":"赵县","130183":"晋州市","130184":"新乐市","130200":"唐山市","130201":"市辖区","130202":"路南区","130203":"路北区","130204":"古冶区","130205":"开平区","130207":"丰南区","130208":"丰润区","130209":"曹妃甸区","130223":"滦县","130224":"滦南县","130225":"乐亭县","130227":"迁西县","130229":"玉田县","130281":"遵化市","130283":"迁安市","130300":"秦皇岛市","130301":"市辖区","130302":"海港区","130303":"山海关区","130304":"北戴河区","130306":"抚宁区","130321":"青龙满族自治县","130322":"昌黎县","130324":"卢龙县","130400":"邯郸市","130401":"市辖区","130402":"邯山区","130403":"丛台区","130404":"复兴区","130406":"峰峰矿区","130421":"邯郸县","130423":"临漳县","130424":"成安县","130425":"大名县","130426":"涉县","130427":"磁县","130428":"肥乡县","130429":"永年县","130430":"邱县","130431":"鸡泽县","130432":"广平县","130433":"馆陶县","130434":"魏县","130435":"曲周县","130481":"武安市","130500":"邢台市","130501":"市辖区","130502":"桥东区","130503":"桥西区","130521":"邢台县","130522":"临城县","130523":"内丘县","130524":"柏乡县","130525":"隆尧县","130526":"任县","130527":"南和县","130528":"宁晋县","130529":"巨鹿县","130530":"新河县","130531":"广宗县","130532":"平乡县","130533":"威县","130534":"清河县","130535":"临西县","130581":"南宫市","130582":"沙河市","130600":"保定市","130601":"市辖区","130602":"竞秀区","130606":"莲池区","130607":"满城区","130608":"清苑区","130609":"徐水区","130623":"涞水县","130624":"阜平县","130626":"定兴县","130627":"唐县","130628":"高阳县","130629":"容城县","130630":"涞源县","130631":"望都县","130632":"安新县","130633":"易县","130634":"曲阳县","130635":"蠡县","130636":"顺平县","130637":"博野县","130638":"雄县","130681":"涿州市","130683":"安国市","130684":"高碑店市","130700":"张家口市","130701":"市辖区","130702":"桥东区","130703":"桥西区","130705":"宣化区","130706":"下花园区","130721":"宣化县","130722":"张北县","130723":"康保县","130724":"沽源县","130725":"尚义县","130726":"蔚县","130727":"阳原县","130728":"怀安县","130729":"万全县","130730":"怀来县","130731":"涿鹿县","130732":"赤城县","130733":"崇礼县","130800":"承德市","130801":"市辖区","130802":"双桥区","130803":"双滦区","130804":"鹰手营子矿区","130821":"承德县","130822":"兴隆县","130823":"平泉县","130824":"滦平县","130825":"隆化县","130826":"丰宁满族自治县","130827":"宽城满族自治县","130828":"围场满族蒙古族自治县","130900":"沧州市","130901":"市辖区","130902":"新华区","130903":"运河区","130921":"沧县","130922":"青县","130923":"东光县","130924":"海兴县","130925":"盐山县","130926":"肃宁县","130927":"南皮县","130928":"吴桥县","130929":"献县","130930":"孟村回族自治县","130981":"泊头市","130982":"任丘市","130983":"黄骅市","130984":"河间市","131000":"廊坊市","131001":"市辖区","131002":"安次区","131003":"广阳区","131022":"固安县","131023":"永清县","131024":"香河县","131025":"大城县","131026":"文安县","131028":"大厂回族自治县","131081":"霸州市","131082":"三河市","131100":"衡水市","131101":"市辖区","131102":"桃城区","131121":"枣强县","131122":"武邑县","131123":"武强县","131124":"饶阳县","131125":"安平县","131126":"故城县","131127":"景县","131128":"阜城县","131181":"冀州市","131182":"深州市","139000":"省直辖县级行政区划","139001":"定州市","139002":"辛集市","140000":"山西省","140100":"太原市","140101":"市辖区","140105":"小店区","140106":"迎泽区","140107":"杏花岭区","140108":"尖草坪区","140109":"万柏林区","140110":"晋源区","140121":"清徐县","140122":"阳曲县","140123":"娄烦县","140181":"古交市","140200":"大同市","140201":"市辖区","140202":"城区","140203":"矿区","140211":"南郊区","140212":"新荣区","140221":"阳高县","140222":"天镇县","140223":"广灵县","140224":"灵丘县","140225":"浑源县","140226":"左云县","140227":"大同县","140300":"阳泉市","140301":"市辖区","140302":"城区","140303":"矿区","140311":"郊区","140321":"平定县","140322":"盂县","140400":"长治市","140401":"市辖区","140402":"城区","140411":"郊区","140421":"长治县","140423":"襄垣县","140424":"屯留县","140425":"平顺县","140426":"黎城县","140427":"壶关县","140428":"长子县","140429":"武乡县","140430":"沁县","140431":"沁源县","140481":"潞城市","140500":"晋城市","140501":"市辖区","140502":"城区","140521":"沁水县","140522":"阳城县","140524":"陵川县","140525":"泽州县","140581":"高平市","140600":"朔州市","140601":"市辖区","140602":"朔城区","140603":"平鲁区","140621":"山阴县","140622":"应县","140623":"右玉县","140624":"怀仁县","140700":"晋中市","140701":"市辖区","140702":"榆次区","140721":"榆社县","140722":"左权县","140723":"和顺县","140724":"昔阳县","140725":"寿阳县","140726":"太谷县","140727":"祁县","140728":"平遥县","140729":"灵石县","140781":"介休市","140800":"运城市","140801":"市辖区","140802":"盐湖区","140821":"临猗县","140822":"万荣县","140823":"闻喜县","140824":"稷山县","140825":"新绛县","140826":"绛县","140827":"垣曲县","140828":"夏县","140829":"平陆县","140830":"芮城县","140881":"永济市","140882":"河津市","140900":"忻州市","140901":"市辖区","140902":"忻府区","140921":"定襄县","140922":"五台县","140923":"代县","140924":"繁峙县","140925":"宁武县","140926":"静乐县","140927":"神池县","140928":"五寨县","140929":"岢岚县","140930":"河曲县","140931":"保德县","140932":"偏关县","140981":"原平市","141000":"临汾市","141001":"市辖区","141002":"尧都区","141021":"曲沃县","141022":"翼城县","141023":"襄汾县","141024":"洪洞县","141025":"古县","141026":"安泽县","141027":"浮山县","141028":"吉县","141029":"乡宁县","141030":"大宁县","141031":"隰县","141032":"永和县","141033":"蒲县","141034":"汾西县","141081":"侯马市","141082":"霍州市","141100":"吕梁市","141101":"市辖区","141102":"离石区","141121":"文水县","141122":"交城县","141123":"兴县","141124":"临县","141125":"柳林县","141126":"石楼县","141127":"岚县","141128":"方山县","141129":"中阳县","141130":"交口县","141181":"孝义市","141182":"汾阳市","150000":"内蒙古自治区","150100":"呼和浩特市","150101":"市辖区","150102":"新城区","150103":"回民区","150104":"玉泉区","150105":"赛罕区","150121":"土默特左旗","150122":"托克托县","150123":"和林格尔县","150124":"清水河县","150125":"武川县","150200":"包头市","150201":"市辖区","150202":"东河区","150203":"昆都仑区","150204":"青山区","150205":"石拐区","150206":"白云鄂博矿区","150207":"九原区","150221":"土默特右旗","150222":"固阳县","150223":"达尔罕茂明安联合旗","150300":"乌海市","150301":"市辖区","150302":"海勃湾区","150303":"海南区","150304":"乌达区","150400":"赤峰市","150401":"市辖区","150402":"红山区","150403":"元宝山区","150404":"松山区","150421":"阿鲁科尔沁旗","150422":"巴林左旗","150423":"巴林右旗","150424":"林西县","150425":"克什克腾旗","150426":"翁牛特旗","150428":"喀喇沁旗","150429":"宁城县","150430":"敖汉旗","150500":"通辽市","150501":"市辖区","150502":"科尔沁区","150521":"科尔沁左翼中旗","150522":"科尔沁左翼后旗","150523":"开鲁县","150524":"库伦旗","150525":"奈曼旗","150526":"扎鲁特旗","150581":"霍林郭勒市","150600":"鄂尔多斯市","150601":"市辖区","150602":"东胜区","150621":"达拉特旗","150622":"准格尔旗","150623":"鄂托克前旗","150624":"鄂托克旗","150625":"杭锦旗","150626":"乌审旗","150627":"伊金霍洛旗","150700":"呼伦贝尔市","150701":"市辖区","150702":"海拉尔区","150703":"扎赉诺尔区","150721":"阿荣旗","150722":"莫力达瓦达斡尔族自治旗","150723":"鄂伦春自治旗","150724":"鄂温克族自治旗","150725":"陈巴尔虎旗","150726":"新巴尔虎左旗","150727":"新巴尔虎右旗","150781":"满洲里市","150782":"牙克石市","150783":"扎兰屯市","150784":"额尔古纳市","150785":"根河市","150800":"巴彦淖尔市","150801":"市辖区","150802":"临河区","150821":"五原县","150822":"磴口县","150823":"乌拉特前旗","150824":"乌拉特中旗","150825":"乌拉特后旗","150826":"杭锦后旗","150900":"乌兰察布市","150901":"市辖区","150902":"集宁区","150921":"卓资县","150922":"化德县","150923":"商都县","150924":"兴和县","150925":"凉城县","150926":"察哈尔右翼前旗","150927":"察哈尔右翼中旗","150928":"察哈尔右翼后旗","150929":"四子王旗","150981":"丰镇市","152200":"兴安盟","152201":"乌兰浩特市","152202":"阿尔山市","152221":"科尔沁右翼前旗","152222":"科尔沁右翼中旗","152223":"扎赉特旗","152224":"突泉县","152500":"锡林郭勒盟","152501":"二连浩特市","152502":"锡林浩特市","152522":"阿巴嘎旗","152523":"苏尼特左旗","152524":"苏尼特右旗","152525":"东乌珠穆沁旗","152526":"西乌珠穆沁旗","152527":"太仆寺旗","152528":"镶黄旗","152529":"正镶白旗","152530":"正蓝旗","152531":"多伦县","152900":"阿拉善盟","152921":"阿拉善左旗","152922":"阿拉善右旗","152923":"额济纳旗","210000":"辽宁省","210100":"沈阳市","210101":"市辖区","210102":"和平区","210103":"沈河区","210104":"大东区","210105":"皇姑区","210106":"铁西区","210111":"苏家屯区","210112":"浑南区","210113":"沈北新区","210114":"于洪区","210122":"辽中县","210123":"康平县","210124":"法库县","210181":"新民市","210200":"大连市","210201":"市辖区","210202":"中山区","210203":"西岗区","210204":"沙河口区","210211":"甘井子区","210212":"旅顺口区","210213":"金州区","210224":"长海县","210281":"瓦房店市","210282":"普兰店市","210283":"庄河市","210300":"鞍山市","210301":"市辖区","210302":"铁东区","210303":"铁西区","210304":"立山区","210311":"千山区","210321":"台安县","210323":"岫岩满族自治县","210381":"海城市","210400":"抚顺市","210401":"市辖区","210402":"新抚区","210403":"东洲区","210404":"望花区","210411":"顺城区","210421":"抚顺县","210422":"新宾满族自治县","210423":"清原满族自治县","210500":"本溪市","210501":"市辖区","210502":"平山区","210503":"溪湖区","210504":"明山区","210505":"南芬区","210521":"本溪满族自治县","210522":"桓仁满族自治县","210600":"丹东市","210601":"市辖区","210602":"元宝区","210603":"振兴区","210604":"振安区","210624":"宽甸满族自治县","210681":"东港市","210682":"凤城市","210700":"锦州市","210701":"市辖区","210702":"古塔区","210703":"凌河区","210711":"太和区","210726":"黑山县","210727":"义县","210781":"凌海市","210782":"北镇市","210800":"营口市","210801":"市辖区","210802":"站前区","210803":"西市区","210804":"鲅鱼圈区","210811":"老边区","210881":"盖州市","210882":"大石桥市","210900":"阜新市","210901":"市辖区","210902":"海州区","210903":"新邱区","210904":"太平区","210905":"清河门区","210911":"细河区","210921":"阜新蒙古族自治县","210922":"彰武县","211000":"辽阳市","211001":"市辖区","211002":"白塔区","211003":"文圣区","211004":"宏伟区","211005":"弓长岭区","211011":"太子河区","211021":"辽阳县","211081":"灯塔市","211100":"盘锦市","211101":"市辖区","211102":"双台子区","211103":"兴隆台区","211121":"大洼县","211122":"盘山县","211200":"铁岭市","211201":"市辖区","211202":"银州区","211204":"清河区","211221":"铁岭县","211223":"西丰县","211224":"昌图县","211281":"调兵山市","211282":"开原市","211300":"朝阳市","211301":"市辖区","211302":"双塔区","211303":"龙城区","211321":"朝阳县","211322":"建平县","211324":"喀喇沁左翼蒙古族自治县","211381":"北票市","211382":"凌源市","211400":"葫芦岛市","211401":"市辖区","211402":"连山区","211403":"龙港区","211404":"南票区","211421":"绥中县","211422":"建昌县","211481":"兴城市","220000":"吉林省","220100":"长春市","220101":"市辖区","220102":"南关区","220103":"宽城区","220104":"朝阳区","220105":"二道区","220106":"绿园区","220112":"双阳区","220113":"九台区","220122":"农安县","220182":"榆树市","220183":"德惠市","220200":"吉林市","220201":"市辖区","220202":"昌邑区","220203":"龙潭区","220204":"船营区","220211":"丰满区","220221":"永吉县","220281":"蛟河市","220282":"桦甸市","220283":"舒兰市","220284":"磐石市","220300":"四平市","220301":"市辖区","220302":"铁西区","220303":"铁东区","220322":"梨树县","220323":"伊通满族自治县","220381":"公主岭市","220382":"双辽市","220400":"辽源市","220401":"市辖区","220402":"龙山区","220403":"西安区","220421":"东丰县","220422":"东辽县","220500":"通化市","220501":"市辖区","220502":"东昌区","220503":"二道江区","220521":"通化县","220523":"辉南县","220524":"柳河县","220581":"梅河口市","220582":"集安市","220600":"白山市","220601":"市辖区","220602":"浑江区","220605":"江源区","220621":"抚松县","220622":"靖宇县","220623":"长白朝鲜族自治县","220681":"临江市","220700":"松原市","220701":"市辖区","220702":"宁江区","2