您好,登錄后才能下訂單哦!
TIPs:
用了element UI的select選擇器 <el-select>。
換成普通select也差不多。
數據沒寫南海諸島,沒寫默認全國。
HTML:
<!--聯動選擇地區--> <el-form-item label="選擇地區:"> <el-select size="small" 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" 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的示例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。