VUE2+elementUI前端实现 三级省市联动select
html:
<el-form-item label="选择地区：">
<el-select size="small" style="width: 100px"
v-model="selectProv"
placeholder="请选择省份"
v-on:change="getProv($event)">
<el-option
v-for="item in provs"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select size="small" style="width: 100px"
v-if="selectProv!=''"
v-model="selectCity"
placeholder="请选择城市"
v-on:change="getCity($event)">
<el-option
v-for="item in citys"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select size="small" style="width: 100px"
v-if="selectCity!=''"
v-model="selectArea"
placeholder="请选择城市"
v-on:change="getArea($event)">
<el-option
v-for="item in area"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item> 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: '',
selectArea: '',
}
}
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: "大连市"
}, {
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: "徐州市"
}, {
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: "福州市"
}, {
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: "开封市"
}, {
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: "衡阳市"
}, {
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: "钦州市"
}, {
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: "乐山市"
}, {
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: "昌都地区"
}, {
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: "银川市"
}, {
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: "无堂区划分区域"
}];
for (var val of allCity){
if (prov == val.prov){
console.log(val);
tempCity.push({label: val.label, value: val.label})
}
}
this.citys = tempCity;
},
getCity: function (city) {
console.log('getCity:' + city);
let allArea = [
{
city: "北京市",
label: "昌平区",
value: "昌平区",
},{
city: "北京市",
label: "五环区",
value: "五环区",
},{
city: "厦门市",
label: "新林县",
value: "新林县",
},{
city: "厦门市",
label: "新罗区",
value: "新罗区",
},{
city: "厦门市",
label: "湖里",
value: "湖里",
},
]
this.selectArea='';
this.area = allArea.filter( item => item.city === city)
console.log(this.selectCity)
},
getArea: function (area) {
console.log('area');
console.log(this.selectArea)
},
VUE2+elementUI前端实现 三级省市联动select的更多相关文章
- JQuerys实现三级省市联动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- select省市联动选择城市 asp.net mvc4
本文在 http://www.cnblogs.com/darrenji/p/3606703.html(感谢博主的分享)基础上加入全国各省市,从文件中读取全国省市县,组成省市联动的选择标签 在Model ...
- Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端
一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- 省市联动_简单的Demo，适用于各种二级菜单联动
最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...
- js实现的省市联动
最近工作,要用到省市联动的功能.网上搜了一下,发现有很多这样的例子,看了不少实例,把觉得写得不错的代码穿上来,好给大家分享一下. <!DOCTYPE html PUBLIC "-//W ...
- ajax做省市联动
原理: 当select.jsp页面打开时,向服务器发送异步请求,得到所有省份的名称(文本数据).然后使用每个省份名称创建<option>,添加到<select name=”provi ...
- jquery省市联动，根据公司需求而写
//author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...
- AJAX案例四：省市联动
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
随机推荐
- 基于jeesite的cms系统（三）：使用RESTful API在前端渲染数据
使用RESTful API可以更好的开发前后分离的应用,后面一节会介绍使用模版引擎Beetl开发后端渲染的应用. 一.配置Swagger(Api 接口文档) 1.使用系统自带 拷贝jeesite-mo ...
- （Python2）自动对话机器人 代码
dict = { 'hello': 'hello'}flag = 'c'work = Trueprint 'hi,my name is python.'print 'do you want chat ...
- C#代码使用Process类调用SWFTools工具
一.Process类调用SWFTools工具将PDF文档转为swf文档 1 string cmdStr = "D:\\SWFTools\\pdf2swf.exe"; string ...
- iptables 防火墙日常
. 检查机目标机器 httpd 服务/etc/init.d/httpd status ========================================================= ...
- Makefile模板（C++）
Makefile的C++的一个模板,可用于根据不同源文件,生成多个可执行文件 . CC = g++ DIR_INC = ./include DIR_SRC = ./src DIR_OBJ = ./ob ...
- Intelij idea 版本控制工具窗口
1. 在菜单栏vcs中启用版本控制 2. 然后调出工具窗口,view-tools window-version control
- 第30月第11天 Xcode 9.0中新增的API版本检查@available
1.Xcode 9.0中新增的API版本检查@available https://www.jianshu.com/p/0a94baa6c3dd https://www.jianshu.com/p/b8 ...
- Spring-Boot配置文件web性能（服务器）配置项
参数 介绍server.address 服务器应绑定到的网络地址server.compression.enabled = false 如果启用响应压缩server.compression.exclud ...
- Centos6.5 安装 python3.5 虚拟环境 virtualenvwrapper
Centos6.5 安装 python3.5 虚拟环境 virtualenvwrapper 1 . 安装 python3.5 下载:https://www.python.org/ https://ww ...
- HG奋斗赛A[20190428]
T1 很简单,判断这个字符串有多少个不同的字符,让后用k减一减 注意: 1.如果不同字符数大于k,不要输出负数 2.变量名别打错 上代码 #include <cstdio> #includ ...