Vant省市区的三级联动
Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城,用 Vant 就再合适
html
<van-address-edit :area-list="areaList" show-postal show-set-default show-search-result :search-result="searchResult" @save="onSave" @change-detail="onChangeDetail"></van-address-edit>
组件需要
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/vant.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/vant.css" />
<script type="text/javascript" src="../../js/area.js"></script>
area.js组件内容
var address = {
province_list: {
'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': '澳门特别行政区',
'900000': '海外'
},
city_list: {
'110100': '北京市',
'120100': '天津市',
'130100': '石家庄市',
'130200': '唐山市',
'130300': '秦皇岛市',
'130400': '邯郸市',
'130500': '邢台市',
'130600': '保定市',
'130700': '张家口市',
'130800': '承德市',
'130900': '沧州市',
'131000': '廊坊市',
'131100': '衡水市',
'139000': '省直辖县',
'140100': '太原市',
'140200': '大同市',
'140300': '阳泉市',
'140400': '长治市',
'140500': '晋城市',
'140600': '朔州市',
'140700': '晋中市',
'140800': '运城市',
'140900': '忻州市',
'141000': '临汾市',
'141100': '吕梁市',
'150100': '呼和浩特市',
'150200': '包头市',
'150300': '乌海市',
'150400': '赤峰市',
'150500': '通辽市',
'150600': '鄂尔多斯市',
'150700': '呼伦贝尔市',
'150800': '巴彦淖尔市',
'150900': '乌兰察布市',
'152200': '兴安盟',
'152500': '锡林郭勒盟',
'152900': '阿拉善盟',
'210100': '沈阳市',
'210200': '大连市',
'210300': '鞍山市',
'210400': '抚顺市',
'210500': '本溪市',
'210600': '丹东市',
'210700': '锦州市',
'210800': '营口市',
'210900': '阜新市',
'211000': '辽阳市',
'211100': '盘锦市',
'211200': '铁岭市',
'211300': '朝阳市',
'211400': '葫芦岛市',
'220100': '长春市',
'220200': '吉林市',
'220300': '四平市',
'220400': '辽源市',
'220500': '通化市',
'220600': '白山市',
'220700': '松原市',
'220800': '白城市',
'222400': '延边朝鲜族自治州',
'230100': '哈尔滨市',
'230200': '齐齐哈尔市',
'230300': '鸡西市',
'230400': '鹤岗市',
'230500': '双鸭山市',
'230600': '大庆市',
'230700': '伊春市',
'230800': '佳木斯市',
'230900': '七台河市',
'231000': '牡丹江市',
'231100': '黑河市',
'231200': '绥化市',
'232700': '大兴安岭地区',
'310100': '上海市',
'320100': '南京市',
'320200': '无锡市',
'320300': '徐州市',
'320400': '常州市',
'320500': '苏州市',
'320600': '南通市',
'320700': '连云港市',
'320800': '淮安市',
'320900': '盐城市',
'321000': '扬州市',
'321100': '镇江市',
'321200': '泰州市',
'321300': '宿迁市',
'330100': '杭州市',
'330200': '宁波市',
'330300': '温州市',
'330400': '嘉兴市',
'330500': '湖州市',
'330600': '绍兴市',
'330700': '金华市',
'330800': '衢州市',
'330900': '舟山市',
'331000': '台州市',
'331100': '丽水市',
'340100': '合肥市',
'340200': '芜湖市',
'340300': '蚌埠市',
'340400': '淮南市',
'340500': '马鞍山市',
'340600': '淮北市',
'340700': '铜陵市',
'340800': '安庆市',
'341000': '黄山市',
'341100': '滁州市',
'341200': '阜阳市',
'341300': '宿州市',
'341500': '六安市',
'341600': '亳州市',
'341700': '池州市',
'341800': '宣城市',
'350100': '福州市',
'350200': '厦门市',
'350300': '莆田市',
'350400': '三明市',
'350500': '泉州市',
'350600': '漳州市',
'350700': '南平市',
'350800': '龙岩市',
'350900': '宁德市',
'360100': '南昌市',
'360200': '景德镇市',
'360300': '萍乡市',
'360400': '九江市',
'360500': '新余市',
'360600': '鹰潭市',
'360700': '赣州市',
'360800': '吉安市',
'360900': '宜春市',
'361000': '抚州市',
'361100': '上饶市',
'370100': '济南市',
'370200': '青岛市',
'370300': '淄博市',
'370400': '枣庄市',
'370500': '东营市',
'370600': '烟台市',
'370700': '潍坊市',
'370800': '济宁市',
'370900': '泰安市',
'371000': '威海市',
'371100': '日照市',
'371200': '莱芜市',
'371300': '临沂市',
'371400': '德州市',
'371500': '聊城市',
'371600': '滨州市',
'371700': '菏泽市',
'410100': '郑州市',
'410200': '开封市',
'410300': '洛阳市',
'410400': '平顶山市',
'410500': '安阳市',
'410600': '鹤壁市',
'410700': '新乡市',
'410800': '焦作市',
'410900': '濮阳市',
'411000': '许昌市',
'411100': '漯河市',
'411200': '三门峡市',
'411300': '南阳市',
'411400': '商丘市',
'411500': '信阳市',
'411600': '周口市',
'411700': '驻马店市',
'419000': '省直辖县',
'420100': '武汉市',
'420200': '黄石市',
'420300': '十堰市',
'420500': '宜昌市',
'420600': '襄阳市',
'420700': '鄂州市',
'420800': '荆门市',
'420900': '孝感市',
'421000': '荆州市',
'421100': '黄冈市',
'421200': '咸宁市',
'421300': '随州市',
'422800': '恩施土家族苗族自治州',
'429000': '省直辖县',
'430100': '长沙市',
'430200': '株洲市',
'430300': '湘潭市',
'430400': '衡阳市',
'430500': '邵阳市',
'430600': '岳阳市',
'430700': '常德市',
'430800': '张家界市',
'430900': '益阳市',
'431000': '郴州市',
'431100': '永州市',
'431200': '怀化市',
'431300': '娄底市',
'433100': '湘西土家族苗族自治州',
'440100': '广州市',
'440200': '韶关市',
'440300': '深圳市',
'440400': '珠海市',
'440500': '汕头市',
'440600': '佛山市',
'440700': '江门市',
'440800': '湛江市',
'440900': '茂名市',
'441200': '肇庆市',
'441300': '惠州市',
'441400': '梅州市',
'441500': '汕尾市',
'441600': '河源市',
'441700': '阳江市',
'441800': '清远市',
'441900': '东莞市',
'442000': '中山市',
'445100': '潮州市',
'445200': '揭阳市',
'445300': '云浮市',
'450100': '南宁市',
'450200': '柳州市',
'450300': '桂林市',
'450400': '梧州市',
'450500': '北海市',
'450600': '防城港市',
'450700': '钦州市',
'450800': '贵港市',
'450900': '玉林市',
'451000': '百色市',
'451100': '贺州市',
'451200': '河池市',
'451300': '来宾市',
'451400': '崇左市',
'460100': '海口市',
'460200': '三亚市',
'460300': '三沙市',
'460400': '儋州市',
'469000': '省直辖县',
'500100': '重庆市',
'500200': '县',
'510100': '成都市',
'510300': '自贡市',
'510400': '攀枝花市',
'510500': '泸州市',
'510600': '德阳市',
'510700': '绵阳市',
'510800': '广元市',
'510900': '遂宁市',
'511000': '内江市',
'511100': '乐山市',
'511300': '南充市',
'511400': '眉山市',
'511500': '宜宾市',
'511600': '广安市',
'511700': '达州市',
'511800': '雅安市',
'511900': '巴中市',
'512000': '资阳市',
'513200': '阿坝藏族羌族自治州',
'513300': '甘孜藏族自治州',
'513400': '凉山彝族自治州',
'520100': '贵阳市',
'520200': '六盘水市',
'520300': '遵义市',
'520400': '安顺市',
'520500': '毕节市',
'520600': '铜仁市',
'522300': '黔西南布依族苗族自治州',
'522600': '黔东南苗族侗族自治州',
'522700': '黔南布依族苗族自治州',
'530100': '昆明市',
'530300': '曲靖市',
'530400': '玉溪市',
'530500': '保山市',
'530600': '昭通市',
'530700': '丽江市',
'530800': '普洱市',
'530900': '临沧市',
'532300': '楚雄彝族自治州',
'532500': '红河哈尼族彝族自治州',
'532600': '文山壮族苗族自治州',
'532800': '西双版纳傣族自治州',
'532900': '大理白族自治州',
'533100': '德宏傣族景颇族自治州',
'533300': '怒江傈僳族自治州',
'533400': '迪庆藏族自治州',
'540100': '拉萨市',
'540200': '日喀则市',
'540300': '昌都市',
'540400': '林芝市',
'540500': '山南市',
'540600': '那曲市',
'542500': '阿里地区',
'610100': '西安市',
'610200': '铜川市',
'610300': '宝鸡市',
'610400': '咸阳市',
'610500': '渭南市',
'610600': '延安市',
'610700': '汉中市',
'610800': '榆林市',
'610900': '安康市',
'611000': '商洛市',
'620100': '兰州市',
'620200': '嘉峪关市',
'620300': '金昌市',
'620400': '白银市',
'620500': '天水市',
'620600': '武威市',
'620700': '张掖市',
'620800': '平凉市',
'620900': '酒泉市',
'621000': '庆阳市',
'621100': '定西市',
'621200': '陇南市',
'622900': '临夏回族自治州',
'623000': '甘南藏族自治州',
'630100': '西宁市',
'630200': '海东市',
'632200': '海北藏族自治州',
'632300': '黄南藏族自治州',
'632500': '海南藏族自治州',
'632600': '果洛藏族自治州',
'632700': '玉树藏族自治州',
'632800': '海西蒙古族藏族自治州',
'640100': '银川市',
'640200': '石嘴山市',
'640300': '吴忠市',
'640400': '固原市',
'640500': '中卫市',
'650100': '乌鲁木齐市',
'650200': '克拉玛依市',
'650400': '吐鲁番市',
'650500': '哈密市',
'652300': '昌吉回族自治州',
'652700': '博尔塔拉蒙古自治州',
'652800': '巴音郭楞蒙古自治州',
'652900': '阿克苏地区',
'653000': '克孜勒苏柯尔克孜自治州',
'653100': '喀什地区',
'653200': '和田地区',
'654000': '伊犁哈萨克自治州',
'654200': '塔城地区',
'654300': '阿勒泰地区',
'659000': '自治区直辖县级行政区划',
'710100': '台北市',
'710200': '高雄市',
'710300': '台南市',
'710400': '台中市',
'710500': '金门县',
'710600': '南投县',
'710700': '基隆市',
'710800': '新竹市',
'710900': '嘉义市',
'711100': '新北市',
'711200': '宜兰县',
'711300': '新竹县',
'711400': '桃园县',
'711500': '苗栗县',
'711700': '彰化县',
'711900': '嘉义县',
'712100': '云林县',
'712400': '屏东县',
'712500': '台东县',
'712600': '花莲县',
'712700': '澎湖县',
'712800': '连江县',
'810100': '香港岛',
'810200': '九龙',
'810300': '新界',
'820100': '澳门半岛',
'820200': '离岛',
'912400': '加拿大',
'941000': '韩国',
'984000': '美国'
},
county_list: {
'110101': '东城区',
'110102': '西城区',
'110105': '朝阳区',
'110106': '丰台区',
'110107': '石景山区',
'110108': '海淀区',
'110109': '门头沟区',
'110111': '房山区',
'110112': '通州区',
'110113': '顺义区',
'110114': '昌平区',
'110115': '大兴区',
'110116': '怀柔区',
'110117': '平谷区',
'110118': '密云区',
'110119': '延庆区',
'120101': '和平区',
'120102': '河东区',
'120103': '河西区',
'120104': '南开区',
'120105': '河北区',
'120106': '红桥区',
'120110': '东丽区',
'120111': '西青区',
'120112': '津南区',
'120113': '北辰区',
'120114': '武清区',
'120115': '宝坻区',
'120116': '滨海新区',
'120117': '宁河区',
'120118': '静海区',
'120119': '蓟州区',
'130102': '长安区',
'130104': '桥西区',
'130105': '新华区',
'130107': '井陉矿区',
'130108': '裕华区',
'130109': '藁城区',
'130110': '鹿泉区',
'130111': '栾城区',
'130121': '井陉县',
'130123': '正定县',
'130125': '行唐县',
'130126': '灵寿县',
'130127': '高邑县',
'130128': '深泽县',
'130129': '赞皇县',
'130130': '无极县',
'130131': '平山县',
'130132': '元氏县',
'130133': '赵县',
'130181': '辛集市',
'130183': '晋州市',
'130184': '新乐市',
'130202': '路南区',
'130203': '路北区',
'130204': '古冶区',
'130205': '开平区',
'130207': '丰南区',
'130208': '丰润区',
'130209': '曹妃甸区',
'130223': '滦县',
'130224': '滦南县',
'130225': '乐亭县',
'130227': '迁西县',
'130229': '玉田县',
'130281': '遵化市',
'130283': '迁安市',
'130302': '海港区',
'130303': '山海关区',
'130304': '北戴河区',
'130306': '抚宁区',
'130321': '青龙满族自治县',
'130322': '昌黎县',
'130324': '卢龙县',
'130390': '经济技术开发区',
'130402': '邯山区',
'130403': '丛台区',
'130404': '复兴区',
'130406': '峰峰矿区',
'130407': '肥乡区',
'130408': '永年区',
'130423': '临漳县',
'130424': '成安县',
'130425': '大名县',
'130426': '涉县',
'130427': '磁县',
'130430': '邱县',
'130431': '鸡泽县',
'130432': '广平县',
'130433': '馆陶县',
'130434': '魏县',
'130435': '曲周县',
'130481': '武安市',
'130502': '桥东区',
'130503': '桥西区',
'130521': '邢台县',
'130522': '临城县',
'130523': '内丘县',
'130524': '柏乡县',
'130525': '隆尧县',
'130526': '任县',
'130527': '南和县',
'130528': '宁晋县',
'130529': '巨鹿县',
'130530': '新河县',
'130531': '广宗县',
'130532': '平乡县',
'130533': '威县',
'130534': '清河县',
'130535': '临西县',
'130581': '南宫市',
'130582': '沙河市',
'130602': '竞秀区',
'130606': '莲池区',
'130607': '满城区',
'130608': '清苑区',
'130609': '徐水区',
'130623': '涞水县',
'130624': '阜平县',
'130626': '定兴县',
'130627': '唐县',
'130628': '高阳县',
'130629': '容城县',
'130630': '涞源县',
'130631': '望都县',
'130632': '安新县',
'130633': '易县',
'130634': '曲阳县',
'130635': '蠡县',
'130636': '顺平县',
'130637': '博野县',
'130638': '雄县',
'130681': '涿州市',
'130682': '定州市',
'130683': '安国市',
'130684': '高碑店市',
'130702': '桥东区',
'130703': '桥西区',
'130705': '宣化区',
'130706': '下花园区',
'130708': '万全区',
'130709': '崇礼区',
'130722': '张北县',
'130723': '康保县',
'130724': '沽源县',
'130725': '尚义县',
'130726': '蔚县',
'130727': '阳原县',
'130728': '怀安县',
'130730': '怀来县',
'130731': '涿鹿县',
'130732': '赤城县',
'130802': '双桥区',
'130803': '双滦区',
'130804': '鹰手营子矿区',
'130821': '承德县',
'130822': '兴隆县',
'130824': '滦平县',
'130825': '隆化县',
'130826': '丰宁满族自治县',
'130827': '宽城满族自治县',
'130828': '围场满族蒙古族自治县',
'130881': '平泉市',
'130902': '新华区',
'130903': '运河区',
'130921': '沧县',
'130922': '青县',
'130923': '东光县',
'130924': '海兴县',
'130925': '盐山县',
'130926': '肃宁县',
'130927': '南皮县',
'130928': '吴桥县',
'130929': '献县',
'130930': '孟村回族自治县',
'130981': '泊头市',
'130982': '任丘市',
'130983': '黄骅市',
'130984': '河间市',
'131002': '安次区',
'131003': '广阳区',
'131022': '固安县',
'131023': '永清县',
'131024': '香河县',
'131025': '大城县',
'131026': '文安县',
'131028': '大厂回族自治县',
'131081': '霸州市',
'131082': '三河市',
'131090': '开发区',
'131102': '桃城区',
'131103': '冀州区',
'131121': '枣强县',
'131122': '武邑县',
'131123': '武强县',
'131124': '饶阳县',
'131125': '安平县',
'131126': '故城县',
'131127': '景县',
'131128': '阜城县',
'131182': '深州市',
'140105': '小店区',
'140106': '迎泽区',
'140107': '杏花岭区',
'140108': '尖草坪区',
'140109': '万柏林区',
'140110': '晋源区',
'140121': '清徐县',
'140122': '阳曲县',
'140123': '娄烦县',
'140181': '古交市',
'140202': '城区',
'140203': '矿区',
'140211': '南郊区',
'140212': '新荣区',
'140221': '阳高县',
'140222': '天镇县',
'140223': '广灵县',
'140224': '灵丘县',
'140225': '浑源县',
'140226': '左云县',
'140227': '大同县',
'140302': '城区',
'140303': '矿区',
'140311': '郊区',
'140321': '平定县',
'140322': '盂县',
'140402': '城区',
'140411': '郊区',
'140421': '长治县',
'140423': '襄垣县',
'140424': '屯留县',
'140425': '平顺县',
'140426': '黎城县',
'140427': '壶关县',
'140428': '长子县',
'140429': '武乡县',
'140430': '沁县',
'140431': '沁源县',
'140481': '潞城市',
'140502': '城区',
'140521': '沁水县',
'140522': '阳城县',
'140524': '陵川县',
'140525': '泽州县',
'140581': '高平市',
'140602': '朔城区',
'140603': '平鲁区',
'140621': '山阴县',
'140622': '应县',
'140623': '右玉县',
'140624': '怀仁县',
'140702': '榆次区',
'140721': '榆社县',
'140722': '左权县',
'140723': '和顺县',
'140724': '昔阳县',
'140725': '寿阳县',
'140726': '太谷县',
'140727': '祁县',
'140728': '平遥县',
'140729': '灵石县',
'140781': '介休市',
'140802': '盐湖区',
'140821': '临猗县',
'140822': '万荣县',
'140823': '闻喜县',
'140824': '稷山县',
'140825': '新绛县',
'140826': '绛县',
'140827': '垣曲县',
'140828': '夏县',
'140829': '平陆县',
'140830': '芮城县',
'140881': '永济市',
'140882': '河津市',
'140902': '忻府区',
'140921': '定襄县',
'140922': '五台县',
'140923': '代县',
'140924': '繁峙县',
'140925': '宁武县',
'140926': '静乐县',
'140927': '神池县',
'140928': '五寨县',
'140929': '岢岚县',
'140930': '河曲县',
'140931': '保德县',
'140932': '偏关县',
'140981': '原平市',
'141002': '尧都区',
'141021': '曲沃县',
'141022': '翼城县',
'141023': '襄汾县',
'141024': '洪洞县',
'141025': '古县',
'141026': '安泽县',
'141027': '浮山县',
'141028': '吉县',
'141029': '乡宁县',
'141030': '大宁县',
'141031': '隰县',
'141032': '永和县',
'141033': '蒲县',
'141034': '汾西县',
'141081': '侯马市',
'141082': '霍州市',
'141102': '离石区',
'141121': '文水县',
'141122': '交城县',
'141123': '兴县',
'141124': '临县',
'141125': '柳林县',
'141126': '石楼县',
'141127': '岚县',
'141128': '方山县',
'141129': '中阳县',
'141130': '交口县',
'141181': '孝义市',
'141182': '汾阳市