VUE2 前端实现 静态二级省市联动选择select
TIPs:
用了element UI的select选择器
换成普通select也差不多。
数据没写南海诸岛，没写默认全国。
处理对应地级市的数据用的excel (笑)
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
HTML:
JS:
export default {data() {return {provs:[{label:"北京市",value:"北京市"},{label:"天津市",value:"天津市"},{label:"河北省",value:"河北省"},{label:"山西省",value:"山西省"},{label:"内蒙古自治区",value:"内蒙古自治区"},{label:"辽宁省",value:"辽宁省"},{label:"吉林省",value:"吉林省"},{label:"黑龙江省",value:"黑龙江省"},{label:"上海市",value:"上海市"},{label:"江苏省",value:"江苏省"},{label:"浙江省",value:"浙江省"},{label:"安徽省",value:"安徽省"},{label:"福建省",value:"福建省"},{label:"江西省",value:"江西省"},{label:"山东省",value:"山东省"},{label:"河南省",value:"河南省"},{label:"湖北省",value:"湖北省"},{label:"湖南省",value:"湖南省"},{label:"广东省",value:"广东省"},{label:"广西壮族自治区",value:"广西壮族自治区"},{label:"海南省",value:"海南省"},{label:"重庆市",value:"重庆市"},{label:"四川省",value:"四川省"},{label:"贵州省",value:"贵州省"},{label:"云南省",value:"云南省"},{label:"西藏自治区",value:"西藏自治区"},{label:"陕西省",value:"陕西省"},{label:"甘肃省",value:"甘肃省"},{label:"青海省",value:"青海省"},{label:"宁夏回族自治区",value:"宁夏回族自治区"},{label:"新疆维吾尔自治区",value:"新疆维吾尔自治区"},{label:"台湾省",value:"台湾省"},{label:"香港特别行政区",value:"香港特别行政区"},{label:"澳门特别行政区",value:"澳门特别行政区"}] ,citys: [],selectProv: '',selectCity: ''}},methods: {/*二级联动选择地区*/
getProv: function (prov) {
let tempCity=[];
this.citys=[];
this.selectCity='';
let allCity=[{
prov: "北京市",
label: "北京市"
}, {
prov: "天津市",
label: "天津市"
}, {
prov: "河北省",
label: "石家庄市"
}, {
prov: "河北省",
label: "唐山市"
}, {
prov: "河北省",
label: "秦皇岛市"
}, {
prov: "河北省",
label: "邯郸市"
}, {
prov: "河北省",
label: "邢台市"
}, {
prov: "河北省",
label: "保定市"
}, {
prov: "河北省",
label: "张家口市"
}, {
prov: "河北省",
label: "承德市"
}, {
prov: "河北省",
label: "沧州市"
}, {
prov: "河北省",
label: "廊坊市"
}, {
prov: "河北省",
label: "衡水市"
}, {
prov: "山西省",
label: "太原市"
}, {
prov: "山西省",
label: "大同市"
}, {
prov: "山西省",
label: "阳泉市"
}, {
prov: "山西省",
label: "长治市"
}, {
prov: "山西省",
label: "晋城市"
}, {
prov: "山西省",
label: "朔州市"
}, {
prov: "山西省",
label: "晋中市"
}, {
prov: "山西省",
label: "运城市"
}, {
prov: "山西省",
label: "忻州市"
}, {
prov: "山西省",
label: "临汾市"
}, {
prov: "山西省",
label: "吕梁市"
}, {
prov: "内蒙古自治区",
label: "呼和浩特市"
}, {
prov: "内蒙古自治区",
label: "包头市"
}, {
prov: "内蒙古自治区",
label: "乌海市"
}, {
prov: "内蒙古自治区",
label: "赤峰市"
}, {
prov: "内蒙古自治区",
label: "通辽市"
}, {
prov: "内蒙古自治区",
label: "鄂尔多斯市"
}, {
prov: "内蒙古自治区",
label: "呼伦贝尔市"
}, {
prov: "内蒙古自治区",
label: "巴彦淖尔市"
}, {
prov: "内蒙古自治区",
label: "乌兰察布市"
}, {
prov: "内蒙古自治区",
label: "兴安盟"
}, {
prov: "内蒙古自治区",
label: "锡林郭勒盟"
}, {
prov: "内蒙古自治区",
label: "阿拉善盟"
}, {
prov: "辽宁省",
label: "沈阳市"
}, {
prov: "辽宁省",
label: "大连市"
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！