VUE2 前端实现 静态二级省市联动选择select的示例

TIPs:

用了element UI的select选择器 <el-select>。

换成普通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-form-item> 

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: "大连市"
    }, {
     prov: "辽宁省",
     label: "鞍山市"
    }, {
     prov: "辽宁省",
     label: "抚顺市"
    }, {
     prov: "辽宁省",
     label: "本溪市"
    }, {
     prov: "辽宁省",
     label: "丹东市"
    }, {
     prov: "辽宁省",
     label: "锦州市"
    }, {
     prov: "辽宁省",
     label: "营口市"
    }, {
     prov: "辽宁省",
     label: "阜新市"
    }, {
     prov: "辽宁省",
     label: "辽阳市"
    }, {
     prov: "辽宁省",
     label: "盘锦市"
    }, {
     prov: "辽宁省",
     label: "铁岭市"
    }, {
     prov: "辽宁省",
     label: "朝阳市"
    }, {
     prov: "辽宁省",
     label: "葫芦岛市"
    }, {
     prov: "吉林省",
     label: "长春市"
    }, {
     prov: "吉林省",
     label: "吉林市"
    }, {
     prov: "吉林省",
     label: "四平市"
    }, {
     prov: "吉林省",
     label: "辽源市"
    }, {
     prov: "吉林省",
     label: "通化市"
    }, {
     prov: "吉林省",
     label: "白山市"
    }, {
     prov: "吉林省",
     label: "松原市"
    }, {
     prov: "吉林省",
     label: "白城市"
    }, {
     prov: "吉林省",
     label: "延边朝鲜族自治州"
    }, {
     prov: "黑龙江省",
     label: "哈尔滨市"
    }, {
     prov: "黑龙江省",
     label: "齐齐哈尔市"
    }, {
     prov: "黑龙江省",
     label: "鸡西市"
    }, {
     prov: "黑龙江省",
     label: "鹤岗市"
    }, {
     prov: "黑龙江省",
     label: "双鸭山市"
    }, {
     prov: "黑龙江省",
     label: "大庆市"
    }, {
     prov: "黑龙江省",
     label: "伊春市"
    }, {
     prov: "黑龙江省",
     label: "佳木斯市"
    }, {
     prov: "黑龙江省",
     label: "七台河市"
    }, {
     prov: "黑龙江省",
     label: "牡丹江市"
    }, {
     prov: "黑龙江省",
     label: "黑河市"
    }, {
     prov: "黑龙江省",
     label: "绥化市"
    }, {
     prov: "黑龙江省",
     label: "大兴安岭地区"
    }, {
     prov: "上海市",
     label: "上海市"
    }, {
     prov: "江苏省",
     label: "南京市"
    }, {
     prov: "江苏省",
     label: "无锡市"
    }, {
     prov: "江苏省",
     label: "徐州市"
    }, {
     prov: "江苏省",
     label: "常州市"
    }, {
     prov: "江苏省",
     label: "苏州市"
    }, {
     prov: "江苏省",
     label: "南通市"
    }, {
     prov: "江苏省",
     label: "连云港市"
    }, {
     prov: "江苏省",
     label: "淮安市"
    }, {
     prov: "江苏省",
     label: "盐城市"
    }, {
     prov: "江苏省",
     label: "扬州市"
    }, {
     prov: "江苏省",
     label: "镇江市"
    }, {
     prov: "江苏省",
     label: "泰州市"
    }, {
     prov: "江苏省",
     label: "宿迁市"
    }, {
     prov: "浙江省",
     label: "杭州市"
    }, {
     prov: "浙江省",
     label: "宁波市"
    }, {
     prov: "浙江省",
     label: "温州市"
    }, {
     prov: "浙江省",
     label: "嘉兴市"
    }, {
     prov: "浙江省",
     label: "湖州市"
    }, {
     prov: "浙江省",
     label: "绍兴市"
    }, {
     prov: "浙江省",
     label: "金华市"
    }, {
     prov: "浙江省",
     label: "衢州市"
    }, {
     prov: "浙江省",
     label: "舟山市"
    }, {
     prov: "浙江省",
     label: "台州市"
    }, {
     prov: "浙江省",
     label: "丽水市"
    }, {
     prov: "安徽省",
     label: "合肥市"
    }, {
     prov: "安徽省",
     label: "芜湖市"
    }, {
     prov: "安徽省",
     label: "蚌埠市"
    }, {
     prov: "安徽省",
     label: "淮南市"
    }, {
     prov: "安徽省",
     label: "马鞍山市"
    }, {
     prov: "安徽省",
     label: "淮北市"
    }, {
     prov: "安徽省",
     label: "铜陵市"
    }, {
     prov: "安徽省",
     label: "安庆市"
    }, {
     prov: "安徽省",
     label: "黄山市"
    }, {
     prov: "安徽省",
     label: "滁州市"
    }, {
     prov: "安徽省",
     label: "阜阳市"
    }, {
     prov: "安徽省",
     label: "宿州市"
    }, {
     prov: "安徽省",
     label: "六安市"
    }, {
     prov: "安徽省",
     label: "亳州市"
    }, {
     prov: "安徽省",
     label: "池州市"
    }, {
     prov: "安徽省",
     label: "宣城市"
    }, {
     prov: "福建省",
     label: "福州市"
    }, {
     prov: "福建省",
     label: "厦门市"
    }, {
     prov: "福建省",
     label: "莆田市"
    }, {
     prov: "福建省",
     label: "三明市"
    }, {
     prov: "福建省",
     label: "泉州市"
    }, {
     prov: "福建省",
     label: "漳州市"
    }, {
     prov: "福建省",
     label: "南平市"
    }, {
     prov: "福建省",
     label: "龙岩市"
    }, {
     prov: "福建省",
     label: "宁德市"
    }, {
     prov: "江西省",
     label: "南昌市"
    }, {
     prov: "江西省",
     label: "景德镇市"
    }, {
     prov: "江西省",
     label: "萍乡市"
    }, {
     prov: "江西省",
     label: "九江市"
    }, {
     prov: "江西省",
     label: "新余市"
    }, {
     prov: "江西省",
     label: "鹰潭市"
    }, {
     prov: "江西省",
     label: "赣州市"
    }, {
     prov: "江西省",
     label: "吉安市"
    }, {
     prov: "江西省",
     label: "宜春市"
    }, {
     prov: "江西省",
     label: "抚州市"
    }, {
     prov: "江西省",
     label: "上饶市"
    }, {
     prov: "山东省",
     label: "济南市"
    }, {
     prov: "山东省",
     label: "青岛市"
    }, {
     prov: "山东省",
     label: "淄博市"
    }, {
     prov: "山东省",
     label: "枣庄市"
    }, {
     prov: "山东省",
     label: "东营市"
    }, {
     prov: "山东省",
     label: "烟台市"
    }, {
     prov: "山东省",
     label: "潍坊市"
    }, {
     prov: "山东省",
     label: "济宁市"
    }, {
     prov: "山东省",
     label: "泰安市"
    }, {
     prov: "山东省",
     label: "威海市"
    }, {
     prov: "山东省",
     label: "日照市"
    }, {
     prov: "山东省",
     label: "莱芜市"
    }, {
     prov: "山东省",
     label: "临沂市"
    }, {
     prov: "山东省",
     label: "德州市"
    }, {
     prov: "山东省",
     label: "聊城市"
    }, {
     prov: "山东省",
     label: "滨州市"
    }, {
     prov: "山东省",
     label: "菏泽市"
    }, {
     prov: "河南省",
     label: "郑州市"
    }, {
     prov: "河南省",
     label: "开封市"
    }, {
     prov: "河南省",
     label: "洛阳市"
    }, {
     prov: "河南省",
     label: "平顶山市"
    }, {
     prov: "河南省",
     label: "安阳市"
    }, {
     prov: "河南省",
     label: "鹤壁市"
    }, {
     prov: "河南省",
     label: "新乡市"
    }, {
     prov: "河南省",
     label: "焦作市"
    }, {
     prov: "河南省",
     label: "濮阳市"
    }, {
     prov: "河南省",
     label: "许昌市"
    }, {
     prov: "河南省",
     label: "漯河市"
    }, {
     prov: "河南省",
     label: "三门峡市"
    }, {
     prov: "河南省",
     label: "南阳市"
    }, {
     prov: "河南省",
     label: "商丘市"
    }, {
     prov: "河南省",
     label: "信阳市"
    }, {
     prov: "河南省",
     label: "周口市"
    }, {
     prov: "河南省",
     label: "驻马店市"
    }, {
     prov: "河南省",
     label: "省直辖县级行政区划"
    }, {
     prov: "湖北省",
     label: "武汉市"
    }, {
     prov: "湖北省",
     label: "黄石市"
    }, {
     prov: "湖北省",
     label: "十堰市"
    }, {
     prov: "湖北省",
     label: "宜昌市"
    }, {
     prov: "湖北省",
     label: "襄阳市"
    }, {
     prov: "湖北省",
     label: "鄂州市"
    }, {
     prov: "湖北省",
     label: "荆门市"
    }, {
     prov: "湖北省",
     label: "孝感市"
    }, {
     prov: "湖北省",
     label: "荆州市"
    }, {
     prov: "湖北省",
     label: "黄冈市"
    }, {
     prov: "湖北省",
     label: "咸宁市"
    }, {
     prov: "湖北省",
     label: "随州市"
    }, {
     prov: "湖北省",
     label: "恩施土家族苗族自治州"
    }, {
     prov: "湖北省",
     label: "省直辖县级行政区划"
    }, {
     prov: "湖北省",
     label: "仙桃市"
    }, {
     prov: "湖北省",
     label: "潜江市"
    }, {
     prov: "湖北省",
     label: "天门市"
    }, {
     prov: "湖北省",
     label: "神农架林区"
    }, {
     prov: "湖南省",
     label: "长沙市"
    }, {
     prov: "湖南省",
     label: "株洲市"
    }, {
     prov: "湖南省",
     label: "湘潭市"
    }, {
     prov: "湖南省",
     label: "衡阳市"
    }, {
     prov: "湖南省",
     label: "邵阳市"
    }, {
     prov: "湖南省",
     label: "岳阳市"
    }, {
     prov: "湖南省",
     label: "常德市"
    }, {
     prov: "湖南省",
     label: "张家界市"
    }, {
     prov: "湖南省",
     label: "益阳市"
    }, {
     prov: "湖南省",
     label: "郴州市"
    }, {
     prov: "湖南省",
     label: "永州市"
    }, {
     prov: "湖南省",
     label: "怀化市"
    }, {
     prov: "湖南省",
     label: "娄底市"
    }, {
     prov: "湖南省",
     label: "湘西土家族苗族自治州"
    }, {
     prov: "广东省",
     label: "广州市"
    }, {
     prov: "广东省",
     label: "韶关市"
    }, {
     prov: "广东省",
     label: "深圳市"
    }, {
     prov: "广东省",
     label: "珠海市"
    }, {
     prov: "广东省",
     label: "汕头市"
    }, {
     prov: "广东省",
     label: "佛山市"
    }, {
     prov: "广东省",
     label: "江门市"
    }, {
     prov: "广东省",
     label: "湛江市"
    }, {
     prov: "广东省",
     label: "茂名市"
    }, {
     prov: "广东省",
     label: "肇庆市"
    }, {
     prov: "广东省",
     label: "惠州市"
    }, {
     prov: "广东省",
     label: "梅州市"
    }, {
     prov: "广东省",
     label: "汕尾市"
    }, {
     prov: "广东省",
     label: "河源市"
    }, {
     prov: "广东省",
     label: "阳江市"
    }, {
     prov: "广东省",
     label: "清远市"
    }, {
     prov: "广东省",
     label: "东莞市"
    }, {
     prov: "广东省",
     label: "中山市"
    }, {
     prov: "广东省",
     label: "潮州市"
    }, {
     prov: "广东省",
     label: "揭阳市"
    }, {
     prov: "广东省",
     label: "云浮市"
    }, {
     prov: "广西壮族自治区",
     label: "南宁市"
    }, {
     prov: "广西壮族自治区",
     label: "柳州市"
    }, {
     prov: "广西壮族自治区",
     label: "桂林市"
    }, {
     prov: "广西壮族自治区",
     label: "梧州市"
    }, {
     prov: "广西壮族自治区",
     label: "北海市"
    }, {
     prov: "广西壮族自治区",
     label: "防城港市"
    }, {
     prov: "广西壮族自治区",
     label: "钦州市"
    }, {
     prov: "广西壮族自治区",
     label: "贵港市"
    }, {
     prov: "广西壮族自治区",
     label: "玉林市"
    }, {
     prov: "广西壮族自治区",
     label: "百色市"
    }, {
     prov: "广西壮族自治区",
     label: "贺州市"
    }, {
     prov: "广西壮族自治区",
     label: "河池市"
    }, {
     prov: "广西壮族自治区",
     label: "来宾市"
    }, {
     prov: "广西壮族自治区",
     label: "崇左市"
    }, {
     prov: "海南省",
     label: "海口市"
    }, {
     prov: "海南省",
     label: "三亚市"
    }, {
     prov: "海南省",
     label: "三沙市"
    }, {
     prov: "海南省",
     label: "省直辖县级行政区划"
    }, {
     prov: "海南省",
     label: "五指山市"
    }, {
     prov: "海南省",
     label: "琼海市"
    }, {
     prov: "海南省",
     label: "儋州市"
    }, {
     prov: "海南省",
     label: "文昌市"
    }, {
     prov: "海南省",
     label: "万宁市"
    }, {
     prov: "海南省",
     label: "东方市"
    }, {
     prov: "海南省",
     label: "定安县"
    }, {
     prov: "海南省",
     label: "屯昌县"
    }, {
     prov: "海南省",
     label: "澄迈县"
    }, {
     prov: "海南省",
     label: "临高县"
    }, {
     prov: "海南省",
     label: "白沙黎族自治县"
    }, {
     prov: "海南省",
     label: "昌江黎族自治县"
    }, {
     prov: "海南省",
     label: "乐东黎族自治县"
    }, {
     prov: "海南省",
     label: "陵水黎族自治县"
    }, {
     prov: "海南省",
     label: "保亭黎族苗族自治县"
    }, {
     prov: "海南省",
     label: "琼中黎族苗族自治县"
    }, {
     prov: "重庆市",
     label: "重庆市"
    }, {
     prov: "四川省",
     label: "成都市"
    }, {
     prov: "四川省",
     label: "自贡市"
    }, {
     prov: "四川省",
     label: "攀枝花市"
    }, {
     prov: "四川省",
     label: "泸州市"
    }, {
     prov: "四川省",
     label: "德阳市"
    }, {
     prov: "四川省",
     label: "绵阳市"
    }, {
     prov: "四川省",
     label: "广元市"
    }, {
     prov: "四川省",
     label: "遂宁市"
    }, {
     prov: "四川省",
     label: "内江市"
    }, {
     prov: "四川省",
     label: "乐山市"
    }, {
     prov: "四川省",
     label: "南充市"
    }, {
     prov: "四川省",
     label: "眉山市"
    }, {
     prov: "四川省",
     label: "宜宾市"
    }, {
     prov: "四川省",
     label: "广安市"
    }, {
     prov: "四川省",
     label: "达州市"
    }, {
     prov: "四川省",
     label: "雅安市"
    }, {
     prov: "四川省",
     label: "巴中市"
    }, {
     prov: "四川省",
     label: "资阳市"
    }, {
     prov: "四川省",
     label: "阿坝藏族羌族自治州"
    }, {
     prov: "四川省",
     label: "甘孜藏族自治州"
    }, {
     prov: "四川省",
     label: "凉山彝族自治州"
    }, {
     prov: "贵州省",
     label: "贵阳市"
    }, {
     prov: "贵州省",
     label: "六盘水市"
    }, {
     prov: "贵州省",
     label: "遵义市"
    }, {
     prov: "贵州省",
     label: "安顺市"
    }, {
     prov: "贵州省",
     label: "毕节市"
    }, {
     prov: "贵州省",
     label: "铜仁市"
    }, {
     prov: "贵州省",
     label: "黔西南布依族苗族自治州"
    }, {
     prov: "贵州省",
     label: "黔东南苗族侗族自治州"
    }, {
     prov: "贵州省",
     label: "黔南布依族苗族自治州"
    }, {
     prov: "云南省",
     label: "昆明市"
    }, {
     prov: "云南省",
     label: "曲靖市"
    }, {
     prov: "云南省",
     label: "玉溪市"
    }, {
     prov: "云南省",
     label: "保山市"
    }, {
     prov: "云南省",
     label: "昭通市"
    }, {
     prov: "云南省",
     label: "丽江市"
    }, {
     prov: "云南省",
     label: "普洱市"
    }, {
     prov: "云南省",
     label: "临沧市"
    }, {
     prov: "云南省",
     label: "楚雄彝族自治州"
    }, {
     prov: "云南省",
     label: "红河哈尼族彝族自治州"
    }, {
     prov: "云南省",
     label: "文山壮族苗族自治州"
    }, {
     prov: "云南省",
     label: "西双版纳傣族自治州"
    }, {
     prov: "云南省",
     label: "大理白族自治州"
    }, {
     prov: "云南省",
     label: "德宏傣族景颇族自治州"
    }, {
     prov: "云南省",
     label: "怒江傈僳族自治州"
    }, {
     prov: "云南省",
     label: "迪庆藏族自治州"
    }, {
     prov: "西藏自治区",
     label: "拉萨市"
    }, {
     prov: "西藏自治区",
     label: "昌都地区"
    }, {
     prov: "西藏自治区",
     label: "山南地区"
    }, {
     prov: "西藏自治区",
     label: "日喀则地区"
    }, {
     prov: "西藏自治区",
     label: "那曲地区"
    }, {
     prov: "西藏自治区",
     label: "阿里地区"
    }, {
     prov: "西藏自治区",
     label: "林芝地区"
    }, {
     prov: "陕西省",
     label: "西安市"
    }, {
     prov: "陕西省",
     label: "铜川市"
    }, {
     prov: "陕西省",
     label: "宝鸡市"
    }, {
     prov: "陕西省",
     label: "咸阳市"
    }, {
     prov: "陕西省",
     label: "渭南市"
    }, {
     prov: "陕西省",
     label: "延安市"
    }, {
     prov: "陕西省",
     label: "汉中市"
    }, {
     prov: "陕西省",
     label: "榆林市"
    }, {
     prov: "陕西省",
     label: "安康市"
    }, {
     prov: "陕西省",
     label: "商洛市"
    }, {
     prov: "甘肃省",
     label: "兰州市"
    }, {
     prov: "甘肃省",
     label: "嘉峪关市"
    }, {
     prov: "甘肃省",
     label: "金昌市"
    }, {
     prov: "甘肃省",
     label: "白银市"
    }, {
     prov: "甘肃省",
     label: "天水市"
    }, {
     prov: "甘肃省",
     label: "武威市"
    }, {
     prov: "甘肃省",
     label: "张掖市"
    }, {
     prov: "甘肃省",
     label: "平凉市"
    }, {
     prov: "甘肃省",
     label: "酒泉市"
    }, {
     prov: "甘肃省",
     label: "庆阳市"
    }, {
     prov: "甘肃省",
     label: "定西市"
    }, {
     prov: "甘肃省",
     label: "陇南市"
    }, {
     prov: "甘肃省",
     label: "临夏回族自治州"
    }, {
     prov: "甘肃省",
     label: "甘南藏族自治州"
    }, {
     prov: "青海省",
     label: "西宁市"
    }, {
     prov: "青海省",
     label: "海东市"
    }, {
     prov: "青海省",
     label: "海北藏族自治州"
    }, {
     prov: "青海省",
     label: "黄南藏族自治州"
    }, {
     prov: "青海省",
     label: "海南藏族自治州"
    }, {
     prov: "青海省",
     label: "果洛藏族自治州"
    }, {
     prov: "青海省",
     label: "玉树藏族自治州"
    }, {
     prov: "青海省",
     label: "海西蒙古族藏族自治州"
    }, {
     prov: "宁夏回族自治区",
     label: "银川市"
    }, {
     prov: "宁夏回族自治区",
     label: "石嘴山市"
    }, {
     prov: "宁夏回族自治区",
     label: "吴忠市"
    }, {
     prov: "宁夏回族自治区",
     label: "固原市"
    }, {
     prov: "宁夏回族自治区",
     label: "中卫市"
    }, {
     prov: "新疆维吾尔自治区",
     label: "乌鲁木齐市"
    }, {
     prov: "新疆维吾尔自治区",
     label: "克拉玛依市"
    }, {
     prov: "新疆维吾尔自治区",
     label: "吐鲁番地区"
    }, {
     prov: "新疆维吾尔自治区",
     label: "哈密地区"
    }, {
     prov: "新疆维吾尔自治区",
     label: "昌吉回族自治州"
    }, {
     prov: "新疆维吾尔自治区",
     label: "博尔塔拉蒙古自治州"
    }, {
     prov: "新疆维吾尔自治区",
     label: "巴音郭楞蒙古自治州"
    }, {
     prov: "新疆维吾尔自治区",
     label: "阿克苏地区"
    }, {
     prov: "新疆维吾尔自治区",
     label: "克孜勒苏柯尔克孜自治州"
    }, {
     prov: "新疆维吾尔自治区",
     label: "喀什地区"
    }, {
     prov: "新疆维吾尔自治区",
     label: "和田地区"
    }, {
     prov: "新疆维吾尔自治区",
     label: "伊犁哈萨克自治州"
    }, {
     prov: "新疆维吾尔自治区",
     label: "塔城地区"
    }, {
     prov: "新疆维吾尔自治区",
     label: "阿勒泰地区"
    }, {
     prov: "新疆维吾尔自治区",
     label: "自治区直辖县级行政区划"
    }, {
     prov: "新疆维吾尔自治区",
     label: "石河子市"
    }, {
     prov: "新疆维吾尔自治区",
     label: "阿拉尔市"
    }, {
     prov: "新疆维吾尔自治区",
     label: "图木舒克市"
    }, {
     prov: "新疆维吾尔自治区",
     label: "五家渠市"
    }, {
     prov: "台湾省",
     label: "台北市"
    }, {
     prov: "台湾省",
     label: "高雄市"
    }, {
     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(city);
    console.log(this.selectCity)
   }
  },
  mounted: function () {

  },
  updated: function () {

  }
 }

以上这篇VUE2 前端实现 静态二级省市联动选择select的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue.js 2.0中select级联下拉框实例
  • 基于vue2.0实现的级联选择器
  • 使用vue.js实现联动效果的示例代码
  • Vue.js组件tree实现省市多级联动
(0)

相关推荐

  • 使用vue.js实现联动效果的示例代码

    想用vue.js写一个联动效果,按照自己的思路实验了下,并没有成功.请大家指点下我的思路是:通过遍历YX数组,如果某个对象的text和第一个select的selected value相同,则显示对应院系的专业 <div id="test"> <select v-model="A"> <option v-for="yx in YX"> {{yx.text}} </option> </select

  • 基于vue2.0实现的级联选择器

    基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联 web开发中我们经常会遇到级联选择器的问题,尤其是在表单中,无外乎几种情况: 单个级联 (下拉选择框,单选) 单个级联 (多项选择) 二级联动 (省份和城市联动) 三级联动 (省市区联动) 在jquery中有很多好用的插件,比如select2, 单选,多选的功能都具备. 本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数

  • Vue.js组件tree实现省市多级联动

    小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动. 调用示例: <template> <div> <treeview :model='treedata'></treeview> </div> </template> <script> import treeview from './TreeView.vue' export default { compo

  • Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别.     select单选实例: <select v-model="fruit"> <option selected valu

  • VUE2 前端实现 静态二级省市联动选择select的示例

    TIPs: 用了element UI的select选择器 <el-select>. 换成普通select也差不多. 数据没写南海诸岛,没写默认全国. HTML: <!--联动选择地区--> <el-form-item label="选择地区:"> <el-select size="small" style="width: 100px" v-model="selectProv" plac

  • JSON+HTML实现国家省市联动选择效果

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>json</title> <script type="text/javascript"> <!-- v

  • JS简单实现城市二级联动选择插件的方法

    本文实例讲述了JS简单实现城市二级联动选择插件的方法.分享给大家供大家参考.具体如下: js实现的城市联动选择菜单,网上经常见到,不多介绍了,本款城市选择菜单原型基于Select,主要使用JavaScript来实现,运用了数组和循环等基础技巧制作完成的.本效果只是为了演示如何实现,里面的数据不全,需要的自己可以添加. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ejld-city-cha-plug-codes/ 具体代码如下: <htm

  • jQuery 中国省市两级联动选择附图

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>省市两级联动选择&l

  • DIV+CSS+jQ实现省市联动可扩展

    公司的省市县数据比较坑爹,是通过ehr系统那边生成ID来匹配,比如福建省 对应ID 01211014AOP145,城市也对应一个ID,然后区县就不管了.然后我就网上找了一堆资源 插件什么的感觉都不适用就决定自己写一个.因为自己也是半桶水的那种界面都不知道怎么弄,弄哪种格式,什么风格,配色啊.就默默的找了京东.亚马逊.淘宝.当当等他们关于省市区是怎么做的.图如下: 最后我结合一下做了如下图: 废话不多说上源码: <style type="text/css"> #divProC

  • 省市联动效果的简单实现代码(推荐)

    下拉框二级联动效果在日常应用场景中经常会碰到,尤其是涉及地区.品种等有多级选项时.例如:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变. 思路: 1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化. 下面是造的省市的数据: var linkDatas = { provinces:[ { "code":"0", "name":"请选择" }, { "code":"

  • 基于JS实现省市联动效果代码分享

    在日常项目开发阶段经常见到下拉框二级联动效果,尤其是涉及地区.品种等有多级选项时.比如说:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变. 思路: 1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化. 下面是造的省市的数据: var linkDatas = { provinces:[ { "code":"0", "name":"请选择" }, { "code":"

  • Ant design vue中的联动选择取消操作

    项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag

  • PHP+原生态ajax实现的省市联动功能详解

    本文实例讲述了PHP+原生态ajax实现的省市联动功能.分享给大家供大家参考,具体如下: Ajax的核心是JavaScript对象XmlHttpRequest.该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户. XMLHttpRequest XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端,但

  • Android中使用开源框架Citypickerview实现省市区三级联动选择

    1.概述 记得之前做商城项目,需要在地址选择中实现省市区三级联动,方便用户快速的填写地址,当时使用的是一个叫做android-wheel 的开源控件,当时感觉非常好用,唯一麻烦的是需要自己整理并解析省市区的xml文件,思路很简单,但是代码量相对大了些.偶然期间发现了另外一个开源组件,也就是今天要介绍的citypickerview. github地址:crazyandcoder/citypicker 2. 实现效果 下面给大家演示下实现效果: 3.   实现方法 (1)添加依赖 dependenc

随机推荐