小白成長日記：寫個省市區三級聯動

JerryC 發布于2019-08-21 17:51 / 1319人閱讀

摘要：數據來源臺灣缺省完成圖初始化選完省之后部分請選擇請選擇暫無數據暫無數據一開始的初始狀態是省份可以選擇，利用來控制市和區的現實選項。當省份未選擇時，市區因為沒有數據，所以會選擇暫無數據。

依舊使用vue，不需要關注dom太方便了。
數據來源（臺灣缺省）：https://github.com/airyland/c...

完成圖 初始化

選完省之后

html部分

一開始的初始狀態是省份可以選擇，利用v-if來控制市和區的現實選項。當省份未選擇時，市區因為沒有數據，所以會選擇暫無數據。

省份

數據結構如下

"86": {
    "110000": "北京市",
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省",
    "150000": "內蒙古自治區",
    "210000": "遼寧省",
    "220000": "吉林省",
    "230000": "黑龍江省",
    "310000": "上海市",
    "320000": "江蘇省",
    "330000": "浙江省",
    "340000": "安徽省",
    "350000": "福建省",
    "360000": "江西省",
    "370000": "山東省",
    "410000": "河南省",
    "420000": "湖北省",
    "430000": "湖南省",
    "440000": "廣東省",
    "450000": "廣西壯族自治區",
    "460000": "海南省",
    "500000": "重慶市",
    "510000": "四川省",
    "520000": "貴州省",
    "530000": "云南省",
    "540000": "西藏自治區",
    "610000": "陜西省",
    "620000": "甘肅省",
    "630000": "青海省",
    "640000": "寧夏回族自治區",
    "650000": "新疆維吾爾自治區",
    "710000": "臺灣省",
    "810000": "香港特別行政區",
    "820000": "澳門特別行政區"
  },

直接填充進入即可

市

當省份選中時，觸發loadcity()來加載市區的數據，但option無法觸發click事件，所以需要監聽select才行。
市區數據如下

"320000": {
    "320100": "南京市",
    "320200": "無錫市",
    "320300": "徐州市",
    "320400": "常州市",
    "320500": "蘇州市",
    "320600": "南通市",
    "320700": "連云港市",
    "320800": "淮安市",
    "320900": "鹽城市",
    "321000": "揚州市",
    "321100": "鎮江市",
    "321200": "泰州市",
    "321300": "宿遷市"
  },

代碼如下

loadcity(event){
    const num=parseInt(event.target.value)//獲取到選中的省份的鍵，即省份的代碼
    if(num){//如果獲取到省份的代碼
        this.city=chinaData[num]//獲取到該省份下市的數據，默認顯示的是第一個市
        const area_num=Object.keys(this.city)[0]//因為市已經顯示，所以再獲取到第一個市的代碼，比如這里顯示的是南京，通過Object.keys()獲取到鍵
        this.area=chinaData[area_num]//這里獲取到第一個市的第一個區
    }else{//如果重新選中了“請選擇”，將其他數據清空
        this.city=""
        this.area=""
    }
},

區

數據

"320200": {
    "320205": "錫山區",
    "320206": "惠山區",
    "320211": "濱湖區",
    "320213": "梁溪區",
    "320214": "新吳區",
    "320281": "江陰市",
    "320282": "宜興市"
  },

代碼如下

loadarea(event){
    const num=parseInt(event.target.value)//獲取到市的代碼
    this.area=chinaData[num]//獲取到區的數據
},

源碼

https://github.com/yuyeqianxu...
希望能幫助到和我一樣的小白朋友們，有bug麻煩反饋，謝謝！

GPU云服務器云服務器省市三級聯動陜西 js省市縣三級聯動省市聯動省市多級聯動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90106.html

小白成長日記：寫個貪吃蛇

摘要：貪吃蛇并不是通過操作來完成移動的，而是通過記錄貪吃蛇的路徑來將身體渲染出來。目前沒有內置的操作符判斷對象的內容是否相同。還是用的vue，本來以為不合適，但想法錯了。貪吃蛇并不是通過操作dom來完成移動的，而是通過記錄貪吃蛇的路徑來將身體渲染出來。一般移動元素，我們都是變動它的css達到目的，但我在寫貪吃蛇的時候發現這樣很難以實現，參考了網上的資源，發現大部分人是通過記錄貪吃蛇的路徑...

archieyang 2019-08-21 17:55 評論0 收藏0
小白成長日記：寫個日歷

摘要：一周有天，返回的數，如果上月最后一天是星期二，看下的日歷是補了三天，我們得到的是，所以為此，之后就是填充最后一天，用處理一下再排序，上一個月的數據就得到了。每天進步一點點。寫個簡單的小日歷，依舊用vue，方便完成圖 showImg(https://segmentfault.com/img/bVZoWs?w=416&h=495); 思路本月的天數截取上月的天數截取下月天數今...

muzhuyu 2019-08-21 17:50 評論0 收藏0
小白成長日記：一步一步寫個輪播圖插件

摘要：并不是所有人寫的代碼或者插件都適合小白使用，比如這是一個的滾動插件，大多數人使用了之后發現滾動不了，去作者提，其實是他們并不懂滾動的原理。最近在這里看了一篇關于面試的文章《回顧自己三次失敗的面試經歷》，作者三次倒在了輪播圖上。囧，所以我也寫個輪播圖看看。這次是用jQuery寫的，因為最近一直在研究jQuery插件的寫法，所以用jQuery寫的，而且我發現，我vue用太多，完全不熟悉d...

notebin 2019-08-22 11:15 評論0 收藏0
使用vue+element ui 實現省市區三級聯動

摘要：使用實現省市區三級聯動開發工具使用技術效果圖如下話不多說上代碼一，頁面部分二，部分首先引入以下代碼注意引入上方代碼之前需先運行下方代碼進行安裝然后再寫入以下代碼這樣一個省市區三級聯動的下拉列表就完成了 ...

netScorpion 2021-11-11 16:54 評論0 收藏0
Ajax-省市區三級聯動

摘要：三級聯動此例在框架中實現創建數據地區編號上級名稱在文件夾創建靜態頁面省市區三級聯動省請選擇市請選擇區請選擇省，市，區三級聯動顯示市請選擇請選擇省，市，區三級聯動顯示地區請選擇創建控制器查詢獲取三級聯動：此例在ThinkPHP3.2框架中實現 1.創建數據 DROP TABLE IF EXISTS `region`; CREATE TABLE `region` ( `id` in...

jsummer 2019-07-01 14:19 評論0 收藏0