VUE2前端實(shí)現(xiàn)靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例

TIPs:

成都創(chuàng)新互聯(lián)公司是專業(yè)的云安網(wǎng)站建設(shè)公司,云安接單;提供做網(wǎng)站、成都做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行云安網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

用了element UI的select選擇器 <el-select>。

換成普通select也差不多。

數(shù)據(jù)沒(méi)寫(xiě)南海諸島,沒(méi)寫(xiě)默認(rèn)全國(guó)。

HTML:

<!--聯(lián)動(dòng)選擇地區(qū)--> 
    <el-form-item label="選擇地區(qū):"> 
     <el-select size="small"  
        v-model="selectProv" 
        placeholder="請(qǐng)選擇省份" 
        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"  
        v-if="selectProv!=''" 
        v-model="selectCity" 
        placeholder="請(qǐng)選擇城市" 
        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:"內(nèi)蒙古自治區(qū)",value:"內(nèi)蒙古自治區(qū)"},
   {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:"廣西壯族自治區(qū)",value:"廣西壯族自治區(qū)"},
   {label:"海南省",value:"海南省"},
   {label:"重慶市",value:"重慶市"},
   {label:"四川省",value:"四川省"},
   {label:"貴州省",value:"貴州省"},
   {label:"云南省",value:"云南省"},
   {label:"西藏自治區(qū)",value:"西藏自治區(qū)"},
   {label:"陜西省",value:"陜西省"},
   {label:"甘肅省",value:"甘肅省"},
   {label:"青海省",value:"青海省"},
   {label:"寧夏回族自治區(qū)",value:"寧夏回族自治區(qū)"},
   {label:"新疆維吾爾自治區(qū)",value:"新疆維吾爾自治區(qū)"},
   {label:"臺(tái)灣省",value:"臺(tái)灣省"},
   {label:"香港特別行政區(qū)",value:"香港特別行政區(qū)"},
   {label:"澳門(mén)特別行政區(qū)",value:"澳門(mén)特別行政區(qū)"}] ,
    citys: [],
    selectProv: '',
    selectCity: ''
   }
  },
  methods: {
   /*二級(jí)聯(lián)動(dòng)選擇地區(qū)*/
   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: "邢臺(tái)市"
    }, {
     prov: "河北省",
     label: "保定市"
    }, {
     prov: "河北省",
     label: "張家口市"
    }, {
     prov: "河北省",
     label: "承德市"
    }, {
     prov: "河北省",
     label: "滄州市"
    }, {
     prov: "河北省",
     label: "廊坊市"
    }, {
     prov: "河北省",
     label: "衡水市"
    }, {
     prov: "山西省",
     label: "太原市"
    }, {
     prov: "山西省",
     label: "大同市"
    }, {
     prov: "山西省",
     label: "陽(yáng)泉市"
    }, {
     prov: "山西省",
     label: "長(zhǎng)治市"
    }, {
     prov: "山西省",
     label: "晉城市"
    }, {
     prov: "山西省",
     label: "朔州市"
    }, {
     prov: "山西省",
     label: "晉中市"
    }, {
     prov: "山西省",
     label: "運(yùn)城市"
    }, {
     prov: "山西省",
     label: "忻州市"
    }, {
     prov: "山西省",
     label: "臨汾市"
    }, {
     prov: "山西省",
     label: "呂梁市"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "呼和浩特市"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "包頭市"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "烏海市"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "赤峰市"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "通遼市"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "鄂爾多斯市"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "呼倫貝爾市"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "巴彥淖爾市"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "烏蘭察布市"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "興安盟"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "錫林郭勒盟"
    }, {
     prov: "內(nèi)蒙古自治區(qū)",
     label: "阿拉善盟"
    }, {
     prov: "遼寧省",
     label: "沈陽(yáng)市"
    }, {
     prov: "遼寧省",
     label: "大連市"
    }, {
     prov: "遼寧省",
     label: "鞍山市"
    }, {
     prov: "遼寧省",
     label: "撫順市"
    }, {
     prov: "遼寧省",
     label: "本溪市"
    }, {
     prov: "遼寧省",
     label: "丹東市"
    }, {
     prov: "遼寧省",
     label: "錦州市"
    }, {
     prov: "遼寧省",
     label: "營(yíng)口市"
    }, {
     prov: "遼寧省",
     label: "阜新市"
    }, {
     prov: "遼寧省",
     label: "遼陽(yáng)市"
    }, {
     prov: "遼寧省",
     label: "盤(pán)錦市"
    }, {
     prov: "遼寧省",
     label: "鐵嶺市"
    }, {
     prov: "遼寧省",
     label: "朝陽(yáng)市"
    }, {
     prov: "遼寧省",
     label: "葫蘆島市"
    }, {
     prov: "吉林省",
     label: "長(zhǎng)春市"
    }, {
     prov: "吉林省",
     label: "吉林市"
    }, {
     prov: "吉林省",
     label: "四平市"
    }, {
     prov: "吉林省",
     label: "遼源市"
    }, {
     prov: "吉林省",
     label: "通化市"
    }, {
     prov: "吉林省",
     label: "白山市"
    }, {
     prov: "吉林省",
     label: "松原市"
    }, {
     prov: "吉林省",
     label: "白城市"
    }, {
     prov: "吉林省",
     label: "延邊朝鮮族自治州"
    }, {
     prov: "黑龍江省",
     label: "哈爾濱市"
    }, {
     prov: "黑龍江省",
     label: "齊齊哈爾市"
    }, {
     prov: "黑龍江省",
     label: "雞西市"
    }, {
     prov: "黑龍江省",
     label: "鶴崗市"
    }, {
     prov: "黑龍江省",
     label: "雙鴨山市"
    }, {
     prov: "黑龍江省",
     label: "大慶市"
    }, {
     prov: "黑龍江省",
     label: "伊春市"
    }, {
     prov: "黑龍江省",
     label: "佳木斯市"
    }, {
     prov: "黑龍江省",
     label: "七臺(tái)河市"
    }, {
     prov: "黑龍江省",
     label: "牡丹江市"
    }, {
     prov: "黑龍江省",
     label: "黑河市"
    }, {
     prov: "黑龍江省",
     label: "綏化市"
    }, {
     prov: "黑龍江省",
     label: "大興安嶺地區(qū)"
    }, {
     prov: "上海市",
     label: "上海市"
    }, {
     prov: "江蘇省",
     label: "南京市"
    }, {
     prov: "江蘇省",
     label: "無(wú)錫市"
    }, {
     prov: "江蘇省",
     label: "徐州市"
    }, {
     prov: "江蘇省",
     label: "常州市"
    }, {
     prov: "江蘇省",
     label: "蘇州市"
    }, {
     prov: "江蘇省",
     label: "南通市"
    }, {
     prov: "江蘇省",
     label: "連云港市"
    }, {
     prov: "江蘇省",
     label: "淮安市"
    }, {
     prov: "江蘇省",
     label: "鹽城市"
    }, {
     prov: "江蘇省",
     label: "揚(yáng)州市"
    }, {
     prov: "江蘇省",
     label: "鎮(zhèn)江市"
    }, {
     prov: "江蘇省",
     label: "泰州市"
    }, {
     prov: "江蘇省",
     label: "宿遷市"
    }, {
     prov: "浙江省",
     label: "杭州市"
    }, {
     prov: "浙江省",
     label: "寧波市"
    }, {
     prov: "浙江省",
     label: "溫州市"
    }, {
     prov: "浙江省",
     label: "嘉興市"
    }, {
     prov: "浙江省",
     label: "湖州市"
    }, {
     prov: "浙江省",
     label: "紹興市"
    }, {
     prov: "浙江省",
     label: "金華市"
    }, {
     prov: "浙江省",
     label: "衢州市"
    }, {
     prov: "浙江省",
     label: "舟山市"
    }, {
     prov: "浙江省",
     label: "臺(tái)州市"
    }, {
     prov: "浙江省",
     label: "麗水市"
    }, {
     prov: "安徽省",
     label: "合肥市"
    }, {
     prov: "安徽省",
     label: "蕪湖市"
    }, {
     prov: "安徽省",
     label: "蚌埠市"
    }, {
     prov: "安徽省",
     label: "淮南市"
    }, {
     prov: "安徽省",
     label: "馬鞍山市"
    }, {
     prov: "安徽省",
     label: "淮北市"
    }, {
     prov: "安徽省",
     label: "銅陵市"
    }, {
     prov: "安徽省",
     label: "安慶市"
    }, {
     prov: "安徽省",
     label: "黃山市"
    }, {
     prov: "安徽省",
     label: "滁州市"
    }, {
     prov: "安徽省",
     label: "阜陽(yáng)市"
    }, {
     prov: "安徽省",
     label: "宿州市"
    }, {
     prov: "安徽省",
     label: "六安市"
    }, {
     prov: "安徽省",
     label: "亳州市"
    }, {
     prov: "安徽省",
     label: "池州市"
    }, {
     prov: "安徽省",
     label: "宣城市"
    }, {
     prov: "福建省",
     label: "福州市"
    }, {
     prov: "福建省",
     label: "廈門(mén)市"
    }, {
     prov: "福建省",
     label: "莆田市"
    }, {
     prov: "福建省",
     label: "三明市"
    }, {
     prov: "福建省",
     label: "泉州市"
    }, {
     prov: "福建省",
     label: "漳州市"
    }, {
     prov: "福建省",
     label: "南平市"
    }, {
     prov: "福建省",
     label: "龍巖市"
    }, {
     prov: "福建省",
     label: "寧德市"
    }, {
     prov: "江西省",
     label: "南昌市"
    }, {
     prov: "江西省",
     label: "景德鎮(zhèn)市"
    }, {
     prov: "江西省",
     label: "萍鄉(xiāng)市"
    }, {
     prov: "江西省",
     label: "九江市"
    }, {
     prov: "江西省",
     label: "新余市"
    }, {
     prov: "江西省",
     label: "鷹潭市"
    }, {
     prov: "江西省",
     label: "贛州市"
    }, {
     prov: "江西省",
     label: "吉安市"
    }, {
     prov: "江西省",
     label: "宜春市"
    }, {
     prov: "江西省",
     label: "撫州市"
    }, {
     prov: "江西省",
     label: "上饒市"
    }, {
     prov: "山東省",
     label: "濟(jì)南市"
    }, {
     prov: "山東省",
     label: "青島市"
    }, {
     prov: "山東省",
     label: "淄博市"
    }, {
     prov: "山東省",
     label: "棗莊市"
    }, {
     prov: "山東省",
     label: "東營(yíng)市"
    }, {
     prov: "山東省",
     label: "煙臺(tái)市"
    }, {
     prov: "山東省",
     label: "濰坊市"
    }, {
     prov: "山東省",
     label: "濟(jì)寧市"
    }, {
     prov: "山東省",
     label: "泰安市"
    }, {
     prov: "山東省",
     label: "威海市"
    }, {
     prov: "山東省",
     label: "日照市"
    }, {
     prov: "山東省",
     label: "萊蕪市"
    }, {
     prov: "山東省",
     label: "臨沂市"
    }, {
     prov: "山東省",
     label: "德州市"
    }, {
     prov: "山東省",
     label: "聊城市"
    }, {
     prov: "山東省",
     label: "濱州市"
    }, {
     prov: "山東省",
     label: "菏澤市"
    }, {
     prov: "河南省",
     label: "鄭州市"
    }, {
     prov: "河南省",
     label: "開(kāi)封市"
    }, {
     prov: "河南省",
     label: "洛陽(yáng)市"
    }, {
     prov: "河南省",
     label: "平頂山市"
    }, {
     prov: "河南省",
     label: "安陽(yáng)市"
    }, {
     prov: "河南省",
     label: "鶴壁市"
    }, {
     prov: "河南省",
     label: "新鄉(xiāng)市"
    }, {
     prov: "河南省",
     label: "焦作市"
    }, {
     prov: "河南省",
     label: "濮陽(yáng)市"
    }, {
     prov: "河南省",
     label: "許昌市"
    }, {
     prov: "河南省",
     label: "漯河市"
    }, {
     prov: "河南省",
     label: "三門(mén)峽市"
    }, {
     prov: "河南省",
     label: "南陽(yáng)市"
    }, {
     prov: "河南省",
     label: "商丘市"
    }, {
     prov: "河南省",
     label: "信陽(yáng)市"
    }, {
     prov: "河南省",
     label: "周口市"
    }, {
     prov: "河南省",
     label: "駐馬店市"
    }, {
     prov: "河南省",
     label: "省直轄縣級(jí)行政區(qū)劃"
    }, {
     prov: "湖北省",
     label: "武漢市"
    }, {
     prov: "湖北省",
     label: "黃石市"
    }, {
     prov: "湖北省",
     label: "十堰市"
    }, {
     prov: "湖北省",
     label: "宜昌市"
    }, {
     prov: "湖北省",
     label: "襄陽(yáng)市"
    }, {
     prov: "湖北省",
     label: "鄂州市"
    }, {
     prov: "湖北省",
     label: "荊門(mén)市"
    }, {
     prov: "湖北省",
     label: "孝感市"
    }, {
     prov: "湖北省",
     label: "荊州市"
    }, {
     prov: "湖北省",
     label: "黃岡市"
    }, {
     prov: "湖北省",
     label: "咸寧市"
    }, {
     prov: "湖北省",
     label: "隨州市"
    }, {
     prov: "湖北省",
     label: "恩施土家族苗族自治州"
    }, {
     prov: "湖北省",
     label: "省直轄縣級(jí)行政區(qū)劃"
    }, {
     prov: "湖北省",
     label: "仙桃市"
    }, {
     prov: "湖北省",
     label: "潛江市"
    }, {
     prov: "湖北省",
     label: "天門(mén)市"
    }, {
     prov: "湖北省",
     label: "神農(nóng)架林區(qū)"
    }, {
     prov: "湖南省",
     label: "長(zhǎng)沙市"
    }, {
     prov: "湖南省",
     label: "株洲市"
    }, {
     prov: "湖南省",
     label: "湘潭市"
    }, {
     prov: "湖南省",
     label: "衡陽(yáng)市"
    }, {
     prov: "湖南省",
     label: "邵陽(yáng)市"
    }, {
     prov: "湖南省",
     label: "岳陽(yáng)市"
    }, {
     prov: "湖南省",
     label: "常德市"
    }, {
     prov: "湖南省",
     label: "張家界市"
    }, {
     prov: "湖南省",
     label: "益陽(yáng)市"
    }, {
     prov: "湖南省",
     label: "郴州市"
    }, {
     prov: "湖南省",
     label: "永州市"
    }, {
     prov: "湖南省",
     label: "懷化市"
    }, {
     prov: "湖南省",
     label: "婁底市"
    }, {
     prov: "湖南省",
     label: "湘西土家族苗族自治州"
    }, {
     prov: "廣東省",
     label: "廣州市"
    }, {
     prov: "廣東省",
     label: "韶關(guān)市"
    }, {
     prov: "廣東省",
     label: "深圳市"
    }, {
     prov: "廣東省",
     label: "珠海市"
    }, {
     prov: "廣東省",
     label: "汕頭市"
    }, {
     prov: "廣東省",
     label: "佛山市"
    }, {
     prov: "廣東省",
     label: "江門(mén)市"
    }, {
     prov: "廣東省",
     label: "湛江市"
    }, {
     prov: "廣東省",
     label: "茂名市"
    }, {
     prov: "廣東省",
     label: "肇慶市"
    }, {
     prov: "廣東省",
     label: "惠州市"
    }, {
     prov: "廣東省",
     label: "梅州市"
    }, {
     prov: "廣東省",
     label: "汕尾市"
    }, {
     prov: "廣東省",
     label: "河源市"
    }, {
     prov: "廣東省",
     label: "陽(yáng)江市"
    }, {
     prov: "廣東省",
     label: "清遠(yuǎn)市"
    }, {
     prov: "廣東省",
     label: "東莞市"
    }, {
     prov: "廣東省",
     label: "中山市"
    }, {
     prov: "廣東省",
     label: "潮州市"
    }, {
     prov: "廣東省",
     label: "揭陽(yáng)市"
    }, {
     prov: "廣東省",
     label: "云浮市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "南寧市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "柳州市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "桂林市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "梧州市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "北海市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "防城港市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "欽州市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "貴港市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "玉林市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "百色市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "賀州市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "河池市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "來(lái)賓市"
    }, {
     prov: "廣西壯族自治區(qū)",
     label: "崇左市"
    }, {
     prov: "海南省",
     label: "??谑?
    }, {
     prov: "海南省",
     label: "三亞市"
    }, {
     prov: "海南省",
     label: "三沙市"
    }, {
     prov: "海南省",
     label: "省直轄縣級(jí)行政區(qū)劃"
    }, {
     prov: "海南省",
     label: "五指山市"
    }, {
     prov: "海南省",
     label: "瓊海市"
    }, {
     prov: "海南省",
     label: "儋州市"
    }, {
     prov: "海南省",
     label: "文昌市"
    }, {
     prov: "海南省",
     label: "萬(wàn)寧市"
    }, {
     prov: "海南省",
     label: "東方市"
    }, {
     prov: "海南省",
     label: "定安縣"
    }, {
     prov: "海南省",
     label: "屯昌縣"
    }, {
     prov: "海南省",
     label: "澄邁縣"
    }, {
     prov: "海南省",
     label: "臨高縣"
    }, {
     prov: "海南省",
     label: "白沙黎族自治縣"
    }, {
     prov: "海南省",
     label: "昌江黎族自治縣"
    }, {
     prov: "海南省",
     label: "樂(lè)東黎族自治縣"
    }, {
     prov: "海南省",
     label: "陵水黎族自治縣"
    }, {
     prov: "海南省",
     label: "保亭黎族苗族自治縣"
    }, {
     prov: "海南省",
     label: "瓊中黎族苗族自治縣"
    }, {
     prov: "重慶市",
     label: "重慶市"
    }, {
     prov: "四川省",
     label: "成都市"
    }, {
     prov: "四川省",
     label: "自貢市"
    }, {
     prov: "四川省",
     label: "攀枝花市"
    }, {
     prov: "四川省",
     label: "瀘州市"
    }, {
     prov: "四川省",
     label: "德陽(yáng)市"
    }, {
     prov: "四川省",
     label: "綿陽(yáng)市"
    }, {
     prov: "四川省",
     label: "廣元市"
    }, {
     prov: "四川省",
     label: "遂寧市"
    }, {
     prov: "四川省",
     label: "內(nèi)江市"
    }, {
     prov: "四川省",
     label: "樂(lè)山市"
    }, {
     prov: "四川省",
     label: "南充市"
    }, {
     prov: "四川省",
     label: "眉山市"
    }, {
     prov: "四川省",
     label: "宜賓市"
    }, {
     prov: "四川省",
     label: "廣安市"
    }, {
     prov: "四川省",
     label: "達(dá)州市"
    }, {
     prov: "四川省",
     label: "雅安市"
    }, {
     prov: "四川省",
     label: "巴中市"
    }, {
     prov: "四川省",
     label: "資陽(yáng)市"
    }, {
     prov: "四川省",
     label: "阿壩藏族羌族自治州"
    }, {
     prov: "四川省",
     label: "甘孜藏族自治州"
    }, {
     prov: "四川省",
     label: "涼山彝族自治州"
    }, {
     prov: "貴州省",
     label: "貴陽(yáng)市"
    }, {
     prov: "貴州省",
     label: "六盤(pán)水市"
    }, {
     prov: "貴州省",
     label: "遵義市"
    }, {
     prov: "貴州省",
     label: "安順市"
    }, {
     prov: "貴州省",
     label: "畢節(jié)市"
    }, {
     prov: "貴州省",
     label: "銅仁市"
    }, {
     prov: "貴州省",
     label: "黔西南布依族苗族自治州"
    }, {
     prov: "貴州省",
     label: "黔東南苗族侗族自治州"
    }, {
     prov: "貴州省",
     label: "黔南布依族苗族自治州"
    }, {
     prov: "云南省",
     label: "昆明市"
    }, {
     prov: "云南省",
     label: "曲靖市"
    }, {
     prov: "云南省",
     label: "玉溪市"
    }, {
     prov: "云南省",
     label: "保山市"
    }, {
     prov: "云南省",
     label: "昭通市"
    }, {
     prov: "云南省",
     label: "麗江市"
    }, {
     prov: "云南省",
     label: "普洱市"
    }, {
     prov: "云南省",
     label: "臨滄市"
    }, {
     prov: "云南省",
     label: "楚雄彝族自治州"
    }, {
     prov: "云南省",
     label: "紅河哈尼族彝族自治州"
    }, {
     prov: "云南省",
     label: "文山壯族苗族自治州"
    }, {
     prov: "云南省",
     label: "西雙版納傣族自治州"
    }, {
     prov: "云南省",
     label: "大理白族自治州"
    }, {
     prov: "云南省",
     label: "德宏傣族景頗族自治州"
    }, {
     prov: "云南省",
     label: "怒江傈僳族自治州"
    }, {
     prov: "云南省",
     label: "迪慶藏族自治州"
    }, {
     prov: "西藏自治區(qū)",
     label: "拉薩市"
    }, {
     prov: "西藏自治區(qū)",
     label: "昌都地區(qū)"
    }, {
     prov: "西藏自治區(qū)",
     label: "山南地區(qū)"
    }, {
     prov: "西藏自治區(qū)",
     label: "日喀則地區(qū)"
    }, {
     prov: "西藏自治區(qū)",
     label: "那曲地區(qū)"
    }, {
     prov: "西藏自治區(qū)",
     label: "阿里地區(qū)"
    }, {
     prov: "西藏自治區(qū)",
     label: "林芝地區(qū)"
    }, {
     prov: "陜西省",
     label: "西安市"
    }, {
     prov: "陜西省",
     label: "銅川市"
    }, {
     prov: "陜西省",
     label: "寶雞市"
    }, {
     prov: "陜西省",
     label: "咸陽(yáng)市"
    }, {
     prov: "陜西省",
     label: "渭南市"
    }, {
     prov: "陜西省",
     label: "延安市"
    }, {
     prov: "陜西省",
     label: "漢中市"
    }, {
     prov: "陜西省",
     label: "榆林市"
    }, {
     prov: "陜西省",
     label: "安康市"
    }, {
     prov: "陜西省",
     label: "商洛市"
    }, {
     prov: "甘肅省",
     label: "蘭州市"
    }, {
     prov: "甘肅省",
     label: "嘉峪關(guān)市"
    }, {
     prov: "甘肅省",
     label: "金昌市"
    }, {
     prov: "甘肅省",
     label: "白銀市"
    }, {
     prov: "甘肅省",
     label: "天水市"
    }, {
     prov: "甘肅省",
     label: "武威市"
    }, {
     prov: "甘肅省",
     label: "張掖市"
    }, {
     prov: "甘肅省",
     label: "平?jīng)鍪?
    }, {
     prov: "甘肅省",
     label: "酒泉市"
    }, {
     prov: "甘肅省",
     label: "慶陽(yáng)市"
    }, {
     prov: "甘肅省",
     label: "定西市"
    }, {
     prov: "甘肅省",
     label: "隴南市"
    }, {
     prov: "甘肅省",
     label: "臨夏回族自治州"
    }, {
     prov: "甘肅省",
     label: "甘南藏族自治州"
    }, {
     prov: "青海省",
     label: "西寧市"
    }, {
     prov: "青海省",
     label: "海東市"
    }, {
     prov: "青海省",
     label: "海北藏族自治州"
    }, {
     prov: "青海省",
     label: "黃南藏族自治州"
    }, {
     prov: "青海省",
     label: "海南藏族自治州"
    }, {
     prov: "青海省",
     label: "果洛藏族自治州"
    }, {
     prov: "青海省",
     label: "玉樹(shù)藏族自治州"
    }, {
     prov: "青海省",
     label: "海西蒙古族藏族自治州"
    }, {
     prov: "寧夏回族自治區(qū)",
     label: "銀川市"
    }, {
     prov: "寧夏回族自治區(qū)",
     label: "石嘴山市"
    }, {
     prov: "寧夏回族自治區(qū)",
     label: "吳忠市"
    }, {
     prov: "寧夏回族自治區(qū)",
     label: "固原市"
    }, {
     prov: "寧夏回族自治區(qū)",
     label: "中衛(wèi)市"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "烏魯木齊市"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "克拉瑪依市"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "吐魯番地區(qū)"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "哈密地區(qū)"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "昌吉回族自治州"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "博爾塔拉蒙古自治州"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "巴音郭楞蒙古自治州"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "阿克蘇地區(qū)"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "克孜勒蘇柯?tīng)柨俗巫灾沃?
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "喀什地區(qū)"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "和田地區(qū)"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "伊犁哈薩克自治州"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "塔城地區(qū)"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "阿勒泰地區(qū)"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "自治區(qū)直轄縣級(jí)行政區(qū)劃"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "石河子市"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "阿拉爾市"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "圖木舒克市"
    }, {
     prov: "新疆維吾爾自治區(qū)",
     label: "五家渠市"
    }, {
     prov: "臺(tái)灣省",
     label: "臺(tái)北市"
    }, {
     prov: "臺(tái)灣省",
     label: "高雄市"
    }, {
     prov: "臺(tái)灣省",
     label: "基隆市"
    }, {
     prov: "臺(tái)灣省",
     label: "臺(tái)中市"
    }, {
     prov: "臺(tái)灣省",
     label: "臺(tái)南市"
    }, {
     prov: "臺(tái)灣省",
     label: "新竹市"
    }, {
     prov: "臺(tái)灣省",
     label: "嘉義市"
    }, {
     prov: "臺(tái)灣省",
     label: "省直轄"
    }, {
     prov: "香港特別行政區(qū)",
     label: "香港島"
    }, {
     prov: "香港特別行政區(qū)",
     label: "九龍"
    }, {
     prov: "香港特別行政區(qū)",
     label: "新界"
    }, {
     prov: "澳門(mén)特別行政區(qū)",
     label: "澳門(mén)半島"
    }, {
     prov: "澳門(mén)特別行政區(qū)",
     label: "澳門(mén)離島"
    }, {
     prov: "澳門(mén)特別行政區(qū)",
     label: "無(wú)堂區(qū)劃分區(qū)域"
    }];
    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 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持創(chuàng)新互聯(lián)。

文章題目:VUE2前端實(shí)現(xiàn)靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例
URL分享:http://muchs.cn/article38/jophpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站制作網(wǎng)站改版、虛擬主機(jī)、品牌網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)