在項目中常常需要用級聯地址，為了實現這個功能，大家肯定會瘋狂得找插件快速實現，但是博主就喜歡使用純js來實現。 首先建立一個二維數組，第一列存省，第二列存城市並用分隔符分隔 建立兩個一維數組，一個存省，一個存城市 創建兩個初始變數，一個存當前選中得省，一個存當前選中得城市 給省的select選擇框添 ...
在項目中常常需要用級聯地址，為了實現這個功能，大家肯定會瘋狂得找插件快速實現，但是博主就喜歡使用純js來實現。
- 首先建立一個二維數組，第一列存省，第二列存城市並用分隔符分隔
- 建立兩個一維數組，一個存省，一個存城市
- 創建兩個初始變數，一個存當前選中得省，一個存當前選中得城市
- 給省的select選擇框添加一個change事件
- 當select選中時，用選中的值與二維數組的第一列依次匹配
- 匹配上了，建立一個臨時數組，獲取匹配上的第二列並用split分割存入臨時數組中
- 將臨時數組依次push到城市數組中，並展示初始城市
-
<Select v-model="province" style="width:200px" @input="pro">
<Option v-for="item in provinceList" :value="item.value" :key="item.value">
{{ item.label }}
</Option>
</Select>
<Select v-model="city" style="width:200px;margin-left: 24px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">
{{ item.label }}
</Option>
</Select>provinceList: [
{
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: '臺灣省',
label: '臺灣省'
},
],
cityList: [],
province: '',
city: ''
pro() { let sf = []; sf[0] = ["北京市", "東城|西城|崇文|宣武|朝陽|丰台|石景山|海澱|門頭溝|房山|通州|順義|昌平|大興|平谷|懷柔|密雲|延慶"]; sf[1] = ["上海市", "黃浦|盧灣|徐匯|長寧|靜安|普陀|閘北|虹口|楊浦|閔行|寶山|嘉定|浦東|金山|松江|青浦|南匯|奉賢|崇明"]; sf[2] = ["天津市", "和平|東麗|河東|西青|河西|津南|南開|北辰|河北|武清|紅撟|塘沽|漢沽|大港|寧河|靜海|寶坻|薊縣"]; sf[3] = ["重慶市", "萬州|涪陵|渝中|大渡口|江北|沙坪壩|九龍坡|南岸|北碚|萬盛|雙撟|渝北|巴南|黔江|長壽|綦江|潼南|銅梁|大足|榮昌|壁山|梁平|城口|豐都|墊江|武隆|忠縣|開縣|雲陽|奉節|巫山|巫溪|石柱|秀山|酉陽|彭水|江津|合川|永川|南川"]; sf[4] = ["河北省", "石家莊|邯鄲|邢台|保定|張家口|承德|廊坊|唐山|秦皇島|滄州|衡水"]; sf[5] = ["山西省", "太原|大同|陽泉|長治|晉城|朔州|呂梁|忻州|晉中|臨汾|運城"]; sf[6] = ["內蒙古自治區", "呼和浩特|包頭|烏海|赤峰|呼倫貝爾盟|阿拉善盟|哲里木盟|興安盟|烏蘭察布盟|錫林郭勒盟|巴彥淖爾盟|伊克昭盟"]; sf[7] = ["遼寧省", "沈陽|大連|鞍山|撫順|本溪|丹東|錦州|營口|阜新|遼陽|盤錦|鐵嶺|朝陽|葫蘆島"]; sf[8] = ["吉林省", "長春|吉林|四平|遼源|通化|白山|松原|白城|延邊"]; sf[9] = ["黑龍江省", "哈爾濱|齊齊哈爾|牡丹江|佳木斯|大慶|綏化|鶴崗|雞西|黑河|雙鴨山|伊春|七台河|大興安嶺"]; sf[10] = ["江蘇省", "南京|鎮江|蘇州|南通|揚州|鹽城|徐州|連雲港|常州|無錫|宿遷|泰州|淮安"]; sf[11] = ["浙江省", "杭州|寧波|溫州|嘉興|湖州|紹興|金華|衢州|舟山|台州|麗水"]; sf[12] = ["安徽省", "合肥|蕪湖|蚌埠|馬鞍山|淮北|銅陵|安慶|黃山|滁州|宿州|池州|淮南|巢湖|阜陽|六安|宣城|亳州"]; sf[13] = ["福建省", "福州|廈門|莆田|三明|泉州|漳州|南平|龍岩|寧德"]; sf[14] = ["江西省", "南昌市|景德鎮|九江|鷹潭|萍鄉|新餘|贛州|吉安|宜春|撫州|上饒"]; sf[15] = ["山東省", "濟南|青島|淄博|棗莊|東營|煙臺|濰坊|濟寧|泰安|威海|日照|萊蕪|臨沂|德州|聊城|濱州|菏澤"]; sf[16] = ["河南省", "鄭州|開封|洛陽|平頂山|安陽|鶴壁|新鄉|焦作|濮陽|許昌|漯河|三門峽|南陽|商丘|信陽|周口|駐馬店|濟源"]; sf[17] = ["湖北省", "武漢|宜昌|荊州|襄樊|黃石|荊門|黃岡|十堰|恩施|潛江|天門|仙桃|隨州|咸寧|孝感|鄂州"]; sf[18] = ["湖南省", "長沙|常德|株洲|湘潭|衡陽|岳陽|邵陽|益陽|婁底|懷化|郴州|永州|湘西|張家界"]; sf[19] = ["廣東省", "廣州|深圳|珠海|汕頭|東莞|中山|佛山|韶關|江門|湛江|茂名|肇慶|惠州|梅州|汕尾|河源|陽江|清遠|潮州|揭陽|雲浮"]; sf[20] = ["廣西壯族自治區", "南寧|柳州|桂林|梧州|北海|防城港|欽州|貴港|玉林|南寧地區|柳州地區|賀州|百色|河池"]; sf[21] = ["海南省", "海口|三亞"]; sf[22] = ["四川省", "成都|綿陽|德陽|自貢|攀枝花|廣元|內江|樂山|南充|宜賓|廣安|達川|雅安|眉山|甘孜|涼山|瀘州"]; sf[23] = ["貴州省", "貴陽|六盤水|遵義|安順|銅仁|黔西南|畢節|黔東南|黔南"]; sf[24] = ["雲南省", "昆明|大理|曲靖|玉溪|昭通|楚雄|紅河|文山|思茅|西雙版納|保山|德巨集|麗江|怒江|迪慶|臨滄"]; sf[25] = ["西藏自治區", "拉薩|日喀則|山南|林芝|昌都|阿裡|那曲"]; sf[26] = ["陝西省", "西安|寶雞|咸陽|銅川|渭南|延安|榆林|漢中|安康|商洛"]; sf[27] = ["甘肅省", "蘭州|嘉峪關|金昌|白銀|天水|酒泉|張掖|武威|定西|隴南|平涼|慶陽|臨夏|甘南"]; sf[28] = ["寧夏回族自治區", "銀川|石嘴山|吳忠|固原"]; sf[29] = ["青海省", "西寧|海東|海南|海北|黃南|玉樹|果洛|海西"]; sf[30] = ["新疆維吾爾自治區", "烏魯木齊|石河子|克拉瑪依|伊犁|巴音郭勒|昌吉|克孜勒蘇柯爾克孜|博爾塔拉|吐魯番|哈密|喀什|和田|阿克蘇"]; sf[31] = ["香港特別行政區", "香港特別行政區"]; sf[32] = ["澳門特別行政區", "澳門特別行政區"]; sf[33] = ["臺灣省", "臺北|高雄|臺中|臺南|屏東|南投|雲林|新竹|彰化|苗慄|嘉義|花蓮|桃園|宜蘭|基隆|臺東|金門|馬祖|澎湖"]; let self = this; let i; let j; let tmpCity = []; for (i = 0; i < sf.length; i++) { if (self.province === sf[i][0].toString()) { tmpCity = sf[i][1].split("|"); self.cityList = []; for (j = 0; j < tmpCity.length; j++) { let temp = { value: tmpCity[j], label: tmpCity[j] }; self.city = tmpCity[0];//初始選中預設城市 self.cityList.push(temp) } } } }
