layui实现省市区三级联动

1、将中国地区的省市区封装在一个js:city-picker.data.js

/*!
 * Distpicker v1.0.2
 * https://github.com/tshi0912/city-picker
 *
 * Copyright (c) 2014-2016 Tao Shi
 * Released under the MIT license
 *
 * Date: 2016-02-29T12:11:36.473Z
 */

function districts() {

    var ChineseDistricts = {
            86: {
               110000: '北京',
               120000: '天津',
               130000: '河北',
               140000: '山西',
               150000: '内蒙古',
               210000: '辽宁',
               220000: '吉林',
               230000: '黑龙江',
               310000: '上海',
               320000: '江苏',
               330000: '浙江',
               340000: '安徽',
               350000: '福建',
               360000: '江西',
               370000: '山东',
               410000: '河南',
               420000: '湖北',
               430000: '湖南',
               440000: '广东',
               450000: '广西',
               460000: '海南',
               500000: '重庆',
               510000: '四川',
               520000: '贵州',
               530000: '云南',
               540000: '西藏',
               610000: '陕西',
               620000: '甘肃',
               630000: '青海',
               640000: '宁夏',
               650000: '新疆',
               710000: '台湾',
               810000: '香港',
               820000: '澳门'
            },
            // 86: {
            //     'A-G': [
            //         {code: '340000', address: '安徽省'},
            //         {code: '110000', address: '北京市'},
            //         {code: '500000', address: '重庆市'},
            //         {code: '350000', address: '福建省'},
            //         {code: '620000', address: '甘肃省'},
            //         {code: '440000', address: '广东省'},
            //         {code: '450000', address: '广西壮族自治区'},
            //         {code: '520000', address: '贵州省'}],
            //     'H-K': [
            //         {code: '460000', address: '海南省'},
            //         {code: '130000', address: '河北省'},
            //         {code: '230000', address: '黑龙江省'},
            //         {code: '410000', address: '河南省'},
            //         {code: '420000', address: '湖北省'},
            //         {code: '430000', address: '湖南省'},
            //         {code: '320000', address: '江苏省'},
            //         {code: '360000', address: '江西省'},
            //         {code: '220000', address: '吉林省'}],
            //     'L-S': [
            //         {code: '210000', address: '辽宁省'},
            //         {code: '150000', address: '内蒙古自治区'},
            //         {code: '640000', address: '宁夏回族自治区'},
            //         {code: '630000', address: '青海省'},
            //         {code: '370000', address: '山东省'},
            //         {code: '310000', address: '上海市'},
            //         {code: '140000', address: '山西省'},
            //         {code: '610000', address: '陕西省'},
            //         {code: '510000', address: '四川省'}],
            //     'T-Z': [
            //         {code: '120000', address: '天津市'},
            //         {code: '650000', address: '新疆维吾尔自治区'},
            //         {code: '540000', address: '西藏自治区'},
            //         {code: '530000', address: '云南省'},
            //         {code: '330000', address: '浙江省'}]
            // },
            110000: {
                110100: '北京市',
            },
            110100: {
                110101: '东城区',
                110102: '西城区',
                110105: '朝阳区',
                110106: '丰台区',
                110107: '石景山区',
                110108: '海淀区',
                110109: '门头沟区',
                110111: '房山区',
                110112: '通州区',
                110113: '顺义区',
                110114: '昌平区',
                110115: '大兴区',
                110116: '怀柔区',
                110117: '平谷区',
                110228: '密云县',
                110229: '延庆县'
            },
            120000: {
                120100: '天津市'
            },
            120100: {
                120101: '和平区',
                120102: '河东区',
                120103: '河西区',
                120104: '南开区',
                120105: '河北区',
                120106: '红桥区',
                120110: '东丽区',
                120111: '西青区',
                120112: '津南区',
                120113: '北辰区',
                120114: '武清区',
                120115: '宝坻区',
                120116: '滨海新区',
                120221: '宁河县',
                120223: '静海县',
                120225: '蓟县'
            },
            130000: {
                130100: '石家庄市',
                130200: '唐山市',
                130300: '秦皇岛市',
                130400: '邯郸市',
                130500: '邢台市',
                130600: '保定市',
                130700: '张家口市',
                130800: '承德市',
                130900: '沧州市',
                131000: '廊坊市',
                131100: '衡水市'
            },
            130100: {
                130102: '长安区',
                130104: '桥西区',
                130105: '新华区',
                130107: '井陉矿区',
                130108: '裕华区',
                130109: '藁城区',
                130110: '鹿泉区',
                130111: '栾城区',
                130121: '井陉县',
                130123: '正定县',
                130125: '行唐县',
                130126: '灵寿县',
                130127: '高邑县',
                130128: '深泽县',
                130129: '赞皇县',
                130130: '无极县',
                130131: '平山县',
                130132: '元氏县',
                130133: '赵县',
                130181: '辛集市',
                130183: '晋州市',
                130184: '新乐市'
            },
            130200: {
                130202: '路南区',
                130203: '路北区',
                130204: '古冶区',
                130205: '开平区',
                130207: '丰南区',
                130208: '丰润区',
                130209: '曹妃甸区',
                130223: '滦县',
                130224: '滦南县',
                130225: '乐亭县',
                130227: '迁西县',
                130229: '玉田县',
                130281: '遵化市',
                130283: '迁安市'
            },
            130300: {
                130302: '海港区',
                130303: '山海关区',
                130304: '北戴河区',
                130321: '青龙满族自治县',
                130322: '昌黎县',
                130323: '抚宁县',
                130324: '卢龙县'
            },
            130400: {
                130402: '邯山区',
                130403: '丛台区',
                130404: '复兴区',
                130406: '峰峰矿区',
                130421: '邯郸县',
                130423: '临漳县',
                130424: '成安县',
                130425: '大名县',
                130426: '涉县',
                130427: '磁县',
                130428: '肥乡县',
                130429: '永年县',
                130430: '邱县',
                130431: '鸡泽县',
                130432: '广平县',
                130433: '馆陶县',
                130434: '魏县',
                130435: '曲周县',
                130481: '武安市'
            },
            130500: {
                130502: '桥东区',
                130503: '桥西区',
                130521: '邢台县',
                130522: '临城县',
                130523: '内丘县',
                130524: '柏乡县',
                130525: '隆尧县',
                130526: '任县',
                130527: '南和县',
                130528: '宁晋县',
                130529: '巨鹿县',
                130530: '新河县',
                130531: '广宗县',
                130532: '平乡县',
                130533: '威县',
                130534: '清河县',
                130535: '临西县',
                130581: '南宫市',
                130582: '沙河市'
            },
            130600: {
                130602: '竞秀区',
                130603: '莲池区',
                130621: '满城区',
                130622: '清苑区',
                130623: '涞水县',
                130624: '阜平县',
                130625: '徐水区',
                130626: '定兴县',
                130627: '唐县',
                130628: '高阳县',
                130629: '容城县',
                130630: '涞源县',
                130631: '望都县',
                130632: '安新县',
                130633: '易县',
                130634: '曲阳县',
                130635: '蠡县',
                130636: '顺平县',
                130637: '博野县',
                130638: '雄县',
                130681: '涿州市',
                130682: '定州市',
                130683: '安国市',
                130684: '高碑店市'
            },
            130700: {
                130702: '桥东区',
                130703: '桥西区',
                130705: '宣化区',
                130706: '下花园区',
                130721: '宣化县',
                130722: '张北县',
                130723: '康保县',
                130724: '沽源县',
                130725: '尚义县',
                130726: '蔚县',
                130727: '阳原县',
                130728: '怀安县',
                130729: '万全县',
                130730: '怀来县',
                130731: '涿鹿县',
                130732: '赤城县',
                130733: '崇礼县'
            },
            130800: {
                130802: '双桥区',
                130803: '双滦区',
                130804: '鹰手营子矿区',
                130821: '承德县',
                130822: '兴隆县',
                130823: '平泉县',
                130824: '滦平县',
                130825: '隆化县',
                130826: '丰宁满族自治县',
                130827: '宽城满族自治县',
                130828: '围场满族蒙古族自治县'
            },
            130900: {
                130902: '新华区',
                130903: '运河区',
                130921: '沧县',
                130922: '青县',
                130923: '东光县',
                130924: '海兴县',
                130925: '盐山县',
                130926: '肃宁县',
                130927: '南皮县',
                130928: '吴桥县',
                130929: '献县',
                130930: '孟村回族自治县',
                130981: '泊头市',
                130982: '任丘市',
                130983: '黄骅市',
                130984: '河间市'
            },
            131000: {
                131002: '安次区',
                131003: '广阳区',
                131022: '固安县',
                131023: '永清县',
                131024: '香河县',
                131025: '大城县',
                131026: '文安县',
                131028: '大厂回族自治县',
                131081: '霸州市',
                131082: '三河市'
            },
            131100: {
                131102: '桃城区',
                131121: '枣强县',
                131122: '武邑县',
                131123: '武强县',
                131124: '饶阳县',
                131125: '安平县',
                131126: '故城县',
                131127: '景县',
                131128: '阜城县',
                131181: '冀州市',
                131182: '深州市'
            },
            140000: {
                140100: '太原市',
                140200: '大同市',
                140300: '阳泉市',
                140400: '长治市',
                140500: '晋城市',
                140600: '朔州市',
                140700: '晋中市',
                140800: '运城市',
                140900: '忻州市',
                141000: '临汾市',
                141100: '吕梁市'
            },
            140100: {
                140105: '小店区',
                140106: '迎泽区',
                140107: '杏花岭区',
                140108: '尖草坪区',
                140109: '万柏林区',
                140110: '晋源区',
                140121: '清徐县',
                140122: '阳曲县',
                140123: '娄烦县',
                140181: '古交市'
            },
            140200: {
                140202: '城区',
                140203: '矿区',
                140211: '南郊区',
                140212: '新荣区',
                140221: '阳高县',
                140222: '天镇县',
                140223: '广灵县',
                140224: '灵丘县',
                140225: '浑源县',
                140226: '左云县',
                140227: '大同县'
            },
            140300: {
                140302: '城区',
                140303: '矿区',
                140311: '郊区',
                140321: '平定县',
                140322: '盂县'
            },
            140400: {
                140402: '城区',
                140411: '郊区',
                140421: '长治县',
                140423: '襄垣县',
                140424: '屯留县',
                140425: '平顺县',
                140426: '黎城县',
                140427: '壶关县',
                140428: '长子县',
                140429: '武乡县',
                140430: '沁县',
                140431: '沁源县',
                140481: '潞城市'
            },
            140500: {
                140502: '城区',
                140521: '沁水县',
                140522: '阳城县',
                140524: '陵川县',
                140525: '泽州县',
                140581: '高平市'
            },
            140600: {
                140602: '朔城区',
                140603: '平鲁区',
                140621: '山阴县',
                140622: '应县',
                140623: '右玉县',
                140624: '怀仁县'
            },
            140700: {
                140702: '榆次区',
                140721: '榆社县',
                140722: '左权县',
                140723: '和顺县',
                140724: '昔阳县',
                140725: '寿阳县',
                140726: '太谷县',
                140727: '祁县',
                140728: '平遥县',
                140729: '灵石县',
                140781: '介休市'
            },
            140800: {
                140802: '盐湖区',
                140821: '临猗县',
                140822: '万荣县',
                140823: '闻喜县',
                140824: '稷山县',
                140825: '新绛县',
                140826: '绛县',
                140827: '垣曲县',
                140828: '夏县',
                140829: '平陆县',
                140830: '芮城县',
                140881: '永济市',
                140882: '河津市'
            },
            140900: {
                140902: '忻府区',
                140921: '定襄县',
                140922: '五台县',
                140923: '代县',
                140924: '繁峙县',
                140925: '宁武县',
                140926: '静乐县',
                140927: '神池县',
                140928: '五寨县',
                140929: '岢岚县',
                140930: '河曲县',
                140931: '保德县',
                140932: '偏关县',
                140981: '原平市'
            },
            141000: {
                141002: '尧都区',
                141021: '曲沃县',
                141022: '翼城县',
                141023: '襄汾县',
                141024: '洪洞县',
                141025: '古县',
                141026: '安泽县',
                141027: '浮山县',
                141028: '吉县',
                141029: '乡宁县',
                141030: '大宁县',
                141031: '隰县',
                141032: '永和县',
                141033: '蒲县',
                141034: '汾西县',
                141081: '侯马市',
                141082: '霍州市'
            },
            141100: {
                141102: '离石区',
                141121: '文水县',
                141122: '交城县',
                141123: '兴县',
                141124: '临县',
                141125: '柳林县',
                141126: '石楼县',
                141127: '岚县',
                141128: '方山县',
                141129: '中阳县',
                141130: '交口县',
                141181: '孝义市',
                141182: '汾阳市'
            },
            150000: {
                150100: '呼和浩特市',
                150200: '包头市',
                150300: '乌海市',
                150400: '赤峰市',
                150500: '通辽市',
                150600: '鄂尔多斯市',
                150700: '呼伦贝尔市',
                150800: '巴彦淖尔市',
                150900: '乌兰察布市',
                152200: '兴安盟',
                152500: '锡林郭勒盟',
                152900: '阿拉善盟'
            },
            150100: {
                150102: '新城区',
                150103: '回民区',
                150104: '玉泉区',
                150105: '赛罕区',
                150121: '土默特左旗',
                150122: '托克托县',
                150123: '和林格尔县',
                150124: '清水河县',
                150125: '武川县'
            },
            150200: {
                150202: '东河区',
                150203: '昆都仑区',
                150204: '青山区',
                150205: '石拐区',
                150206: '白云鄂博矿区',
                150207: '九原区',
                150221: '土默特右旗',
                150222: '固阳县',
                150223: '达尔罕茂明安联合旗'
            },
            150300: {
                150302: '海勃湾区',
                150303: '海南区',
                150304: '乌达区'
            },
            150400: {
                150402: '红山区',
                150403: '元宝山区',
                150404: '松山区',
                150421: '阿鲁科尔沁旗',
                150422: '巴林左旗',
                150423: '巴林右旗',
                150424: '林西县',
                150425: '克什克腾旗',
                150426: '翁牛特旗',
                150428: '喀喇沁旗',
                150429: '宁城县',
                150430: '敖汉旗'
            },
            150500: {
                150502: '科尔沁区',
                150521: '科尔沁左翼中旗',
                150522: '科尔沁左翼后旗',
                150523: '开鲁县',
                150524: '库伦旗',
                150525: '奈曼旗',
                150526: '扎鲁特旗',
                150581: '霍林郭勒市'
            },
            150600: {
                150602: '东胜区',
                150621: '达拉特旗',
                150622: '准格尔旗',
                150623: '鄂托克前旗',
                150624: '鄂托克旗',
                150625: '杭锦旗',
                150626: '乌审旗',
                150627: '伊金霍洛旗'
            },
            150700: {
                150702: '海拉尔区',
                150703: '扎赉诺尔区',
                150721: '阿荣旗',
                150722: '莫力达瓦达斡尔族自治旗',
                150723: '鄂伦春自治旗',
                150724: '鄂温克族自治旗',
                150725: '陈巴尔虎旗',
                150726: '新巴尔虎左旗',
                150727: '新巴尔虎右旗',
                150781: '满洲里市',
                150782: '牙克石市',
                150783: '扎兰屯市',
                150784: '额尔古纳市',
                150785: '根河市'
            },
            150800: {
                150802: '临河区',
                150821: '五原县',
                150822: '磴口县',
                150823: '乌拉特前旗',
                150824: '乌拉特中旗',
                150825: '乌拉特后旗',
                150826: '杭锦后旗'
            },
            150900: {
                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: '沈阳市',
                210200: '大连市',
                210300: '鞍山市',
                210400: '抚顺市',
                210500: '本溪市',
                210600: '丹东市',
                210700: '锦州市',
                210800: '营口市',
                210900: '阜新市',
                211000: '辽阳市',
                211100: '盘锦市',
                211200: '铁岭市',
                211300: '朝阳市',
                211400: '葫芦岛市'
            },
            210100: {
                210102: '和平区',
                210103: '沈河区',
                210104: '大东区',
                210105: '皇姑区',
                210106: '铁西区',
                210111: '苏家屯区',
                210112: '浑南区',
                210113: '沈北新区',
                210114: '于洪区',
                210122: '辽中县',
                210123: '康平县',
                210124: '法库县',
                210181: '新民市'
            },
            210200: {
                210202: '中山区',
                210203: '西岗区',
                210204: '沙河口区',
                210211: '甘井子区',
                210212: '旅顺口区',
                210213: '金州区',
                210224: '长海县',
                210281: '瓦房店市',
                210282: '普兰店市',
                210283: '庄河市'
            },
            210300: {
                210302: '铁东区',
                210303: '铁西区',
                210304: '立山区',
                210311: '千山区',
                210321: '台安县',
                210323: '岫岩满族自治县',
                210381: '海城市'
            },
            210400: {
                210402: '新抚区',
                210403: '东洲区',
                210404: '望花区',
                210411: '顺城区',
                210421: '抚顺县',
                210422: '新宾满族自治县',
                210423: '清原满族自治县'
            },
            210500: {
                210502: '平山区',
                210503: '溪湖区',
                210504: '明山区',
                210505: '南芬区',
                210521: '本溪满族自治县',
                210522: '桓仁满族自治县'
            },
            210600: {
                210602: '元宝区',
                210603: '振兴区',
                210604: '振安区',
                210624: '宽甸满族自治县',
                210681: '东港市',
                210682: '凤城市'
            },
            210700: {
                210702: '古塔区',
                210703: '凌河区',
                210711: '太和区',
                210726: '黑山县',
                210727: '义县',
                210781: '凌海市',
                210782: '北镇市'
            },
            210800: {
                210802: '站前区',
                210803: '西市区',
                210804: '鲅鱼圈区',
                210811: '老边区',
                210881: '盖州市',
                210882: '大石桥市'
            },
            210900: {
                210902: '海州区',
                210903: '新邱区',
                210904: '太平区',
                210905: '清河门区',
                210911: '细河区',
                210921: '阜新蒙古族自治县',
                210922: '彰武县'
            },
            211000: {
                211002: '白塔区',
                211003: '文圣区',
                211004: '宏伟区',
                211005: '弓长岭区',
                211011: '太子河区',
                211021: '辽阳县',
                211081: '灯塔市'
            },
            211100: {
                211102: '双台子区',
                211103: '兴隆台区',
                211121: '大洼县',
                211122: '盘山县'
            },
            211200: {
                211202: '银州区',
                211204: '清河区',
                211221: '铁岭县',
                211223: '西丰县',
                211224: '昌图县',
                211281: '调兵山市',
                211282: '开原市'
            },
            211300: {
                211302: '双塔区',
                211303: '龙城区',
                211321: '朝阳县',
                211322: '建平县',
                211324: '喀喇沁左翼蒙古族自治县',
                211381: '北票市',
                211382: '凌源市'
            },
            211400: {
                211402: '连山区',
                211403: '龙港区',
                211404: '南票区',
                211421: '绥中县',
                211422: '建昌县',
                211481: '兴城市'
            },
            220000: {
                220100: '长春市',
                220200: '吉林市',
                220300: '四平市',
                220400: '辽源市',
                220500: '通化市',
                220600: '白山市',
                220700: '松原市',
                220800: '白城市',
                222400: '延边朝鲜族自治州'
            },
            220100: {
                220102: '南关区',
                220103: '宽城区',
                220104: '朝阳区',
                220105: '二道区',
                220106: '绿园区',
                220112: '双阳区',
                220113: '九台区',
                220122: '农安县',
                220182: '榆树市',
                220183: '德惠市'
            },
            220200: {
                220202: '昌邑区',
                220203: '龙潭区',
                220204: '船营区',
                220211: '丰满区',
                220221: '永吉县',
                220281: '蛟河市',
                220282: '桦甸市',
                220283: '舒兰市',
  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
实现layui省市区三级联动,你可以按照以下步骤进行操作: 1. 在HTML中创建三个下拉框元素,分别对应省、市和区的选择。 2. 引入layui的相关样式和脚本。 3. 使用layui的form模块初始化表单,并监听下拉框的变化事件。 4. 当省下拉框的值改变时,触发change事件,在事件处理程序中发送异步请求获取对应的市数据,并动态更新市下拉框的选项。 5. 当市下拉框的值改变时,同样触发change事件,在事件处理程序中发送异步请求获取对应的区数据,并动态更新区下拉框的选项。 以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <div class="layui-form"> <div class="layui-form-item"> <div class="layui-input-inline"> <select name="province" id="province"> <option value="">请选择省份</option> <!--省份选项--> </select> </div> <div class="layui-input-inline"> <select name="city" id="city"> <option value="">请选择城市</option> <!--城市选项--> </select> </div> <div class="layui-input-inline"> <select name="area" id="area"> <option value="">请选择地区</option> <!--地区选项--> </select> </div> </div> </div> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script> layui.use(['form'], function() { var form = layui.form; // 省下拉框值改变事件 form.on('select(province)', function(data) { var provinceId = data.value; // 发送异步请求获取对应的市数据 // 根据省份ID获取对应的市数据并动态更新市下拉框选项 // 清空区下拉框选项 $("#area").html('<option value="">请选择地区</option>'); form.render('select'); }); // 市下拉框值改变事件 form.on('select(city)', function(data) { var cityId = data.value; // 发送异步请求获取对应的区数据 // 根据城市ID获取对应的区数据并动态更新区下拉框选项 form.render('select'); }); // 初始化省、市、区的下拉框选项 // 可以通过异步请求获取省、市、区数据并动态添加选项 }); </script> </body> </html> ``` 这是一个简单的示例代码,你需要根据你的实际需求进行修改和完善。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值