效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>基于 Layui form 组件的省市区联动选择的实现</title>
<script src="assets/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="assets/data.js"></script>
<script type="text/javascript" src="assets/province.js"></script>
<script type="text/javascript">
var defaults = {
s1: 'provid',
s2: 'cityid',
s3: 'areaid',
v1: null,
v2: null,
v3: null
};
</script>
</head>
<body>
<div style="width:800px;margin:50px auto;">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="provid" id="provid" lay-filter="provid">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="cityid" id="cityid" lay-filter="cityid">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="areaid" id="areaid" lay-filter="areaid">
<option value="">请选择县/区</option>
</select>
</div>
</div>
</form>
</div>
</body>
</html>
data.js代码
var threeSelectData={"北京":{val:"110000",items:{"北京":{val:"110100",items:{"东城区":"110101","西城区":"110102","崇文区":"110103","宣武区":"110104","朝阳区":"110105","丰台区":"110106","石景山区":"110107","海淀区":"110108","门头沟区":"110109","房山区":"110111","通州区":"110112","顺义区":"110113","昌平区":"110114","大兴区":"110115","怀柔区":"110116","平谷区":"110117","密云县":"110228","延庆县":"110229"}}}},"天津":{val:"120000",items:{"天津":{val:"120100",items:{"和平区":"120101","河东区":"120102","河西区":"120103","南开区":"120104","河北区":"120105","红桥区":"120106","塘沽区":"120107","汉沽区":"120108","大港区":"120109","东丽区":"120110","西青区":"120111","津南区":"120112","北辰区":"120113","武清区":"120114","宝坻区":"120115","宁河县":"120221","静海县":"120223","蓟县":"120225","滨海新区":"120226"}}}},"河北省":{val:"130000",items:{"石家庄":{val:"130100",items:{"长安区":"130102","桥东区":"130103","桥西区":"130104","新华区":"130105","井陉矿区":"130107","裕华区":"130108","井陉县":"130121","正定县":"130123","栾城县":"130124","行唐县":"130125","灵寿县":"130126","高邑县":"130127","深泽县":"130128","赞皇县":"130129","无极县":"130130","平山县":"130131","元氏县":"130132","赵县":"130133","辛集":"130181","藁城":"130182","晋州":"130183","新乐":"130184","鹿泉":"130185"}},"唐山":{val:"130200",items:{"路南区":"130202","路北区":"130203","古冶区":"130204","开平区":"130205","丰南区":"130207","丰润区":"130208","滦县":"130223","滦南县":"130224","乐亭县":"130225","迁西县":"130227","玉田县":"130229","唐海县":"130230","遵化":"130281","迁安":"130283"}},"秦皇岛":{val:"130300",items:{"海港区":"130302","山海关区":"130303","北戴河区":"130304","青龙满族自治县":"130321","昌黎县":"130322","抚宁县":"130323","卢龙县":"130324"}},"邯":{val:"130400",items:{"邯山区":"130402","丛台区":"130403","复兴区":"130404","峰峰矿区":"130406","邯郸县":"130421","临漳县":"130423","成安县":"130424","大名县":"130425","涉县":"130426","磁县":"130427","肥乡县":"130428","永年县":"130429","邱县":"130430","鸡泽县":"130431","广平县":"130432","馆陶县":"130433","魏县":"130434","曲周县":"130435","武安":"130481"}},"邢台":{val:"130500",items:{"桥东区":"130502","桥西区":"130503","邢台县":"130521","临城县":"130522","内丘县":"130523","柏乡县":"130524","隆尧县":"130525","任县":"130526","南和县":"130527","宁晋县":"130528","巨鹿县":"130529","新河县":"130530","广宗县":"130531","平乡县":"130532","威县":"130533","清河县":"130534","临西县":"130535","南宫":"130581","沙河":"130582"}},"保定":{val:"130600",items:{"新市区":"130602","北市区":"130603","南市区":"130604","满城县":"130621","清苑县":"130622","涞水县":"130623","阜平县":"130624","徐水县":"130625","定兴县":"130626","唐县":"130627","高阳县":"130628","容城县":"130629","涞源县":"130630","望都县":"130631","安新县":"130632","易县":"130633","曲阳县":"130634","蠡县":"130635","顺平县":"130636","博野县":"130637","雄县":"130638","涿州":"130681","定州":"130682","安国":"130683","高碑店":"130684"}},"张家口":{val:"130700",items:{"桥东区":"130702","桥西区":"130703","宣化区":"130705","下花园区":"130706","宣化县":"130721","张北县":"130722","康保县":"130723","沽源县":"130724","尚义县":"130725","蔚县":"130726","阳原县":"130727","怀安县":"130728","万全县":"130729","怀来县":"130730","涿鹿县":"130731","赤城县":"130732","崇礼县":"130733"}},"承德":{val:"130800",items:{"双桥区":"130802","双滦区":"130803","鹰手营子矿区":"130804","承德县":"130821","兴隆县":"130822","平泉县":"130823","滦平县":"130824","隆化县":"130825","丰宁满族自治县":"130826","宽城满族自治县":"130827","围场满族蒙古族自治县":"130828"}},"沧州":{val:"130900",items:{"新华区":"130902","运河区":"130903","沧县":"130921","青县":"130922","东光县":"130923","海兴县":"130924","盐山县":"130925","肃宁县":"130926","南皮县":"130927","吴桥县":"130928","献县":"130929","孟村回族自治县":"130930","泊头":"130981","任丘":"130982","黄骅":"130983","河间":"130984"}},"廊坊":{val:"131000",items:{"安次区":"131002","广阳区":"131003","固安县":"131022","永清县":"131023","香河县":"131024","大城县":"131025","文安县":"131026","大厂回族自治县":"131028","霸州":"131081","三河":"131082"}},"衡水":{val:"131100",items:{"桃城区":"131102","枣强县":"131121","武邑县":"131122","武强县":"131123","饶阳县":"131124","安平县":"131125","故城县":"131126","景县":"131127","阜城县":"131128","冀州":"131181","深州":"131182"}}}},"山西省":{val:"140000",items:{"太原":{val:"140100",items:{"小店区":"140105","迎泽区":"140106","杏花岭区":"140107","尖草坪区":"140108","万柏林区":"140109","晋源区":"140110","清徐县":"140121","阳曲县":"140122","娄烦县":"140123","古交":"140181"}},"大同":{val:"140200",items:{"城区":"140202","矿区":"140203","南郊区":"140211","新荣区":"140212","阳高县":"140221","天镇县":"140222","广灵县":"140223","灵丘县":"140224","浑源县":"140225","左云县":"140226","大同县":"140227"}},"阳泉":{val:"140300",items:{"城区":"140302","矿区":"140303","郊区":"140311","平定县":"140321","盂县":"140322"}},"长治":{val:"140400",items:{"城区":"140402","郊区":"140411","长治县":"140421","襄垣县":"140423","屯留县":"140424","平顺县":"140425","黎城县":"140426","壶关县":"140427","长子县":"140428","武乡县":"140429","沁县":"140430","沁源县":"140431","潞城":"140481"}},"晋城":{val:"140500",items:{"城区":"140502","沁水县":"140521","阳城县":"140522","陵川县":"140524","泽州县":"140525","高平":"140581"}},"朔州":{val:"140600",items:{"朔城区":"140602","平鲁区":"140603","山阴县":"140621","应县":"140622","右玉县":"140623","怀仁县":"140624"}},"晋中":{val:"140700",items:{"榆次区":"140702","榆社县":"140721","左权县":"140722","和顺县":"140723","昔阳县":"140724","寿阳县":"140725","太谷县":"140726","祁县":"140727","平遥县":"140728","灵石县":"140729","介休":"140781"}},"运城":{val:"140800",items:{"盐湖区":"140802","临猗县":"140821","万荣县":"140822","闻喜县":"140823","稷山县":"140824","新绛县":"140825","绛县":"140826","垣曲县":"140827","夏县":"140828","平陆县":"140829","芮城县":"140830","永济":"140881","河津":"140882"}},"忻州":{val:"140900",items:{"忻府区":"140902","定襄县":"140921","五台县":"140922","代县":"140923","繁峙县":"140924","宁武县":"140925","静乐县":"140926","神池县":"140927","五寨县":"140928","岢岚县":"140929","河曲县":"140930","保德县":"140931","偏关县":"140932","原平":"140981"}},"临汾":{val:"141000",items:{"尧都区":"141002","曲沃县":"141021","翼城县":"141022","襄汾县":"141023","洪洞县":"141024","古县":"141025","安泽县":"141026","浮山县":"141027","吉县":"141028","乡宁县":"141029","大宁县":"141030","隰县":"141031","永和县":"141032","蒲县":"141033","汾西县":"141034","侯马":"141081","霍州":"141082"}},"吕梁":{val:"141100",items:{"离石区":"141102","文水县":"141121","交城县":"141122","兴县":"141123","临县":"141124","柳林县":"141125","石楼县":"141126","岚县":"141127","方山县":"141128","中阳县":"141129","交口县":"141130","孝义":"141181","汾阳":"141182"}}}},"内蒙古自治区":{val:"150000",items:{"呼和浩特":{val:"150100",items:{"新城区":"150102","回民区":"150103","玉泉区":"150104","赛罕区":"150105","土默特左旗":"150121","托克托县":"150122","和林格尔县":"150123","清水河县":"150124","武川县":"150125"}},"包头":{val:"150200",items:{"东河区":"150202","昆都仑区":"150203","青山区":"150204","石拐区":"150205","白云矿区":"150206","九原区":"150207","土默特右旗":"150221","固阳县":"150222","达尔罕茂明安联合旗":"150223","白云鄂博矿区":"150224"}},"乌海":{val:"150300",items:{"海勃湾区":"150302","海南区":"150303","乌达区":"150304"}},"赤峰":{val:"150400",items:{"红山区":"150402","元宝山区":"150403","松山区":"150404","阿鲁科尔沁旗":"150421","巴林左旗":"150422","巴林右旗":"150423","林西县":"150424","克什克腾旗":"150425","翁牛特旗":"150426","喀喇沁旗":"150428","宁城县":"150429","敖汉旗":"150430"}},"通辽":{val:"150500",items:{"科尔沁区":"150502","科尔沁左翼中旗":"150521","科尔沁左翼后旗":"150522","开鲁县":"150523","库伦旗":"150524","奈曼旗":"150525","扎鲁特旗":"150526","霍林郭勒":"150581"}},"鄂尔多斯":{val:"150600",items:{"东胜区":"150602","达拉特旗":"150621","准格尔旗":"150622","鄂托克前旗":"150623","鄂托克旗":"150624","杭锦旗":"150625","乌审旗":"150626","伊金霍洛旗":"150627"}},"呼伦贝尔":{val:"150700",items:{"海拉尔区":"150702","阿荣旗":"150721","莫力达瓦达斡尔族自治旗":"150722","鄂伦春自治旗":"150723","鄂温克族自治旗":"150724","陈巴尔虎旗":"150725","新巴尔虎左旗":"150726","新巴尔虎右旗":"150727","满洲里":"150781","牙克石":"150782","扎兰屯":"150783","额尔古纳":"150784","根河":"150785"}},"巴彦淖尔":{val:"150800",items:{"临河区":"150802","五原县":"150821","磴口县":"150822","乌拉特前旗":"150823","乌拉特中旗":"150824","乌拉特后旗":"150825","杭锦后旗":"150826"}},"乌兰察布":{val:"150900",items:{"集宁区":"150902","卓资县":"150921","化德县":"150922","商都县":"150923","兴和县":"150924","凉城县":"150925","察哈尔右翼前旗":"150926","察哈尔右翼中旗":"150927","察哈尔右翼后旗":"150928","四子王旗":"150929","丰镇":"150981"}},"兴安盟":{val:"152200",items:{"乌兰浩特":"152201","阿尔山":"152202","科尔沁右翼前旗":"152221","科尔沁右翼中旗":"152222","扎赉特旗":"152223","突泉县":"152224"}},"锡林郭勒盟":{val:"152500",items:{"二连浩特":"152501","锡林浩特":"152502","阿巴嘎旗":"152522","苏尼特左旗":"152523","苏尼特右旗":"152524","东乌珠穆沁旗":"152525","西乌珠穆沁旗":"152526","太仆寺旗":"152527","镶黄旗":"152528","正镶白旗":"152529","正蓝旗":"152530","多伦县":"152531"}},"阿拉善盟":{val:"152900",items:{"阿拉善左旗":"152921","阿拉善右旗":"152922","额济纳旗":"152923"}}}},"辽宁省":{val:"210000",items:{"沈阳":{val:"210100",items:{"和平区":"210102","沈河区":"210103","大东区":"210104","皇姑区":"210105","铁西区":"210106","苏家屯区":"210111","东陵区":"210112","沈北新区":"210113","于洪区":"210114","棋盘山开发区":"210115","辽中县":"210122","康平县":"210123","法库县":"210124","新民":"210181","浑南新区":"210182"}},"大连":{val:"210200",items:{"中山区":"210202","西岗区":"210203","沙河口区":"210204","甘井子区":"210211","旅顺口区":"210212","金州区":"210213","长海县":"210224","瓦房店":"210281","普兰店":"210282","庄河":"210283"}},"鞍山":{val:"210300",items:{"铁东区":"210302","铁西区":"210303","立山区":"210304","千山区":"210311","台安县":"210321","岫岩满族自治县":"210323","海城":"210381"}},"抚顺":{val:"210400",items:{"新抚区":"210402","东洲区":"210403","望花区":"210404","顺城区":"210411","抚顺县":"210421","新宾满族自治县":"210422","清原满族自治县":"210423"}},"本溪":{val:"210500",items:{"平山区":"210502","溪湖区":"210503","明山区":"210504","南芬区":"210505","本溪满族自治县":"210521","桓仁满族自治县":"210522"}},"丹东":{val:"210600",items:{"元宝区":"210602","振兴区":"210603","振安区":"210604","宽甸满族自治县":"210624","东港":"210681","凤城":"210682"}},"锦州":{val:"210700",items:{"古塔区":"210702","凌河区":"210703","太和区":"210711","黑山县":"210726","义县":"210727","凌海":"210781","北宁":"210782","北镇市":"210783"}},"营口":{val:"210800",items:{"站前区":"210802","西市区":"210803","鲅鱼圈区":"210804","老边区":"210811","盖州":"210881","大石桥":"210882"}},"阜新":{val:"210900",items:{"海州区":"210902","新邱区":"210903","太平区":"210904","清河门区":"210905","细河区":"210911","阜新蒙古族自治县":"210921","彰武县":"210922"}},"辽阳":{val:"211000",items:{"白塔区":"211002","文圣区":"211003","宏伟区":"211004","弓长岭区":"211005","太子河区":"211011","辽阳县":"211021","灯塔":"211081"}},"盘锦":{val:"211100",items:{"双台子区":"211102","兴隆台区":"211103","大洼县":"211121","盘山县":"211122"}},"铁岭":{val:"211200",items:{"银州区":"211202","清河区":"211204","铁岭县":"211221","西丰县":"211223","昌图县":"211224","调兵山":"211281","开原":"211282"}},"朝阳":{val:"211300",items:{"双塔区":"211302","龙城区":"211303","朝阳县":"211321","建平县":"211322","喀喇沁左翼蒙古族自治县":"211324","北票":"211381","凌源":"211382"}},"葫芦岛":{val:"211400",items:{"连山区":"211402","龙港区":"211403","南票区":"211404","绥中县":"211421","建昌县":"211422","兴城":"211481"}}}},"吉林省":{val:"220000",items:{"长春":{val:"220100",items:{"南关区":"220102","宽城区":"220103","朝阳区":"220104","二道区":"220105","绿园区":"220106","双阳区":"220112","农安县":"220122","九台":"220181","榆树":"220182","德惠":"220183"}},"吉林":{val:"220200",items:{"昌邑区":"220202","龙潭区":"220203","船营区":"220204","丰满区":"220211","永吉县":"220221","蛟河":"220281","桦":"220282","舒兰":"220283","磐石":"220284","桦甸市":"220285","桦甸市":"220286","桦甸市":"220287","桦甸市":"220288","桦甸市":"220289","桦甸市":"220290","桦甸市":"220291","桦甸市":"220292","桦甸市":"220293","桦甸市":"220294","桦甸市":"220295","桦甸市":"220296","桦甸市":"220297","桦甸市":"220298","桦甸市":"220299"}},"四平":{val:"220300",items:{"铁西区":"220302","铁东区":"220303","梨树县":"220322","伊通满族自治县":"220323","公主岭":"220381","双辽":"220382"}},"辽源":{val:"220400",items
最低0.47元/天 解锁文章
3158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
