该博客介绍如何在商场开发网站中利用Bootstrap创建省市区地址选择的JS控件，提供所需效果展示及源代码分析，适用于提升用户体验。
例如需要设立一个商场的开发网站，然后里面需要设置自己的收货地址即需要用到这类型的控件
- 效果
- 源代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<!-- 引入 jquery-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!-- 引入 bootstrap 框架-->
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<script src="static/bootstrap/css/bootstrap.min.css"></script>
<!-- 引入 distpicker.js-->
<script src="static/js/distpicker.js"></script>
</head>
<body>
<form class="form-inline mt-2 mb-4">
<div data-toggle="distpicker" data-autoselect="3">
<label class="col-sm-2 control-label" style="padding-left: 28px;padding-top: 10px">省市区</label>
<select class="form-control" id="provinceUpdate"></select>
<select class="form-control" id="cityUpdate"></select>
<select class="form-control" id="countyUpdate"></select>
</div>
</form>
</body>
</html>
- distpicker.js 参考原作者：github
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
typeof define === 'function' && define.amd ? define(['jquery'], factory) :
(factory(global.jQuery));
}(this, (function ($) {
'use strict';
$ = 'default' in $ ? $['default'] : $;
var DEFAULTS = {
// Selects the districts automatically.
// 0 -> Disable autoselect
// 1 -> Autoselect province only
// 2 -> Autoselect province and city only
// 3 -> Autoselect all (province, city and district)
autoselect: 0,
// Show placeholder.
placeholder: true,
// Select value. Options: 'name' and 'code'
valueType: 'name',
// Defines the initial value of province.
province: '—— 省 ——',
// Defines the initial value of city.
city: '—— 市 ——',
// Defines the initial value of district.
district: '—— 区 ——'
};
var DISTRICTS = {
100000: {
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: '澳门特别行政区'
},
110000: {
110100: '北京市市辖区'
},
110100: {
110101: '东城区',
110102: '西城区',
110105: '朝阳区',
110106: '丰台区',
110107: '石景山区',
110108: '海淀区',
110109: '门头沟区',
110111: '房山区',
110112: '通州区',
110113: '顺义区',
110114: '昌平区',
110115: '大兴区',
110116: '怀柔区',
110117: '平谷区',
110118: '密云区',
110119: '延庆区'
},
120000: {
120100: '天津市市辖区'
},
120100: {
120101: '和平区',
120102: '河东区',
120103: '河西区',
120104: '南开区',
120105: '河北区',
120106: '红桥区',
120110: '东丽区',
120111: '西青区',
120112: '津南区',
120113: '北辰区',
120114: '武清区',
120115: '宝坻区',
120116: '滨海新区',
120117: '宁河区',
120118: '静海区',
120119: '蓟州区'
},
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: '北戴河区',
130306: '抚宁区',
130321: '青龙满族自治县',
130322: '昌黎县',
130324: '卢龙县'
},
130400: {
130402: '邯山区',
130403: '丛台区',
130404: '复兴区',
130406: '峰峰矿区',
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: '竞秀区',
130606: '莲池区',
130607: '满城区',
130608: '清苑区',
130609: '徐水区',
130623: '涞水县',
130624: '阜平县',
130626: '定兴县',
130627: '唐县',
130628: '高阳县',
130629: '容城县',
130630: '涞源县',
130631: '望都县',
130632: '安新县',
130633: '易县',
130634: '曲阳县',
130635: '蠡县',
130636: '顺平县',
130637: '博野县',
130638: '雄县',
130681: '涿州市',
130682: '定州市',
130683: '安国市',
130684: '高碑店市'
},
130700: {
130702: '桥东区',
130703: '桥西区',
130705: '宣化区',
130706: '下花园区',
130708: '万全区',
130709: '崇礼区',
130722: '张北县',
130723: '康保县',
130724: '沽源县',
130725: '尚义县',
130726: '蔚县',
130727: '阳原县',
130728: '怀安县',
130730: '怀来县',
130731: '涿鹿县',
130732: '赤城县'
},
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: '桃城区',
131103: '冀州区',
131121: '枣强县',
131122: '武邑县',
131123: '武强县',
131124: '饶阳县',
131125: '安平县',
131126: '故城县',
131127: '景县',
131128: '阜城县',
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: '东胜区',
150603: '康巴什区',
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: '于洪区',
210115: '辽中区',
210123: '康平县',
210124: '法库县',
210181: '新民市'
},
210200: {
210202: '中山区',
210203: '西岗区',
210204: '沙河口区',
210211: '甘井子区',
210212: '旅顺口区',
210213: '金州区',
210214: '普兰店区',
210224: '长海县',
210281: '瓦房店市',
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: '兴隆台区',
211104: '大洼区',
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: '舒兰市',
220284: '磐石市'
},
220300: {
220302: '铁西区',
220303: '铁东区',
220322: '梨树县',
220323: '伊通满族自治县',
220381: '公主岭市',
220382: '双辽市'
},
220400: {
220402: '龙山区',
220403: '西安区',
220421: '东丰县',
220422: '东辽县'
},
220500: {
220502: '东昌区',
220503: '二道江区',
220521: '通化县',
220523: '辉南县',
220524: '柳河县',
220581: '梅河口市',
220582: '集安市'
},
220600: {
220602: '浑江区',
220605: '江源区',
220621: '抚松县',
220622: '靖宇县',
220623: '长白朝鲜族自治县',
220681: '临江市'
},
220700: {
220702: '宁江区',
220721: '前郭尔罗斯蒙古族自治县',
220722: '长岭县',
220723: '乾安县',
220781: '扶余市'
},
220800: {
220802: '洮北区',
220821: '镇赉县',
220822: '通榆县',
220881: '洮南市',
220882: '大安市'
},
222400: {
222401: '延吉市',
222402: '图们市',
222403: '敦化市',
222404: '珲春市',
222405: '龙井市',
222406: '和龙市',
222424: '汪清县',
222426: '安图县'
},
230000: {
230100: '哈尔滨市',
230200: '齐齐哈尔市',
230300: '鸡西市',
230400: '鹤岗市',
230500: '双鸭山市',
230600
最低0.47元/天 解锁文章
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
