成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小白成長(zhǎng)日記：寫(xiě)個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)

JerryC / 1325人閱讀

摘要：數(shù)據(jù)來(lái)源臺(tái)灣缺省完成圖初始化選完省之后部分請(qǐng)選擇請(qǐng)選擇暫無(wú)數(shù)據(jù)暫無(wú)數(shù)據(jù)一開(kāi)始的初始狀態(tài)是省份可以選擇，利用來(lái)控制市和區(qū)的現(xiàn)實(shí)選項(xiàng)。當(dāng)省份未選擇時(shí)，市區(qū)因?yàn)闆](méi)有數(shù)據(jù)，所以會(huì)選擇暫無(wú)數(shù)據(jù)。

依舊使用vue，不需要關(guān)注dom太方便了。
數(shù)據(jù)來(lái)源（臺(tái)灣缺?。篽ttps://github.com/airyland/c...
完成圖 初始化

選完省之后

html部分

一開(kāi)始的初始狀態(tài)是省份可以選擇，利用v-if來(lái)控制市和區(qū)的現(xiàn)實(shí)選項(xiàng)。當(dāng)省份未選擇時(shí)，市區(qū)因?yàn)闆](méi)有數(shù)據(jù)，所以會(huì)選擇暫無(wú)數(shù)據(jù)。

省份

數(shù)據(jù)結(jié)構(gòu)如下

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

直接填充進(jìn)入即可

市

當(dāng)省份選中時(shí)，觸發(fā)loadcity()來(lái)加載市區(qū)的數(shù)據(jù)，但option無(wú)法觸發(fā)click事件，所以需要監(jiān)聽(tīng)select才行。
市區(qū)數(shù)據(jù)如下

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

代碼如下

loadcity(event){
    const num=parseInt(event.target.value)//獲取到選中的省份的鍵，即省份的代碼
    if(num){//如果獲取到省份的代碼
        this.city=chinaData[num]//獲取到該省份下市的數(shù)據(jù)，默認(rèn)顯示的是第一個(gè)市
        const area_num=Object.keys(this.city)[0]//因?yàn)槭幸呀?jīng)顯示，所以再獲取到第一個(gè)市的代碼，比如這里顯示的是南京，通過(guò)Object.keys()獲取到鍵
        this.area=chinaData[area_num]//這里獲取到第一個(gè)市的第一個(gè)區(qū)
    }else{//如果重新選中了“請(qǐng)選擇”，將其他數(shù)據(jù)清空
        this.city=""
        this.area=""
    }
},
區(qū)

數(shù)據(jù)

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

代碼如下

loadarea(event){
    const num=parseInt(event.target.value)//獲取到市的代碼
    this.area=chinaData[num]//獲取到區(qū)的數(shù)據(jù)
},
源碼 
https://github.com/yuyeqianxu...
希望能幫助到和我一樣的小白朋友們，有bug麻煩反饋，謝謝！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90106.html

相關(guān)文章

  • 小白成長(zhǎng)日記：寫(xiě)個(gè)貪吃蛇

    摘要：貪吃蛇并不是通過(guò)操作來(lái)完成移動(dòng)的，而是通過(guò)記錄貪吃蛇的路徑來(lái)將身體渲染出來(lái)。目前沒(méi)有內(nèi)置的操作符判斷對(duì)象的內(nèi)容是否相同。 還是用的vue，本來(lái)以為不合適，但想法錯(cuò)了。貪吃蛇并不是通過(guò)操作dom來(lái)完成移動(dòng)的，而是通過(guò)記錄貪吃蛇的路徑來(lái)將身體渲染出來(lái)。 一般移動(dòng)元素，我們都是變動(dòng)它的css達(dá)到目的，但我在寫(xiě)貪吃蛇的時(shí)候發(fā)現(xiàn)這樣很難以實(shí)現(xiàn)，參考了網(wǎng)上的資源，發(fā)現(xiàn)大部分人是通過(guò)記錄貪吃蛇的路徑...

    archieyang 評(píng)論0 收藏0

  • 小白成長(zhǎng)日記：寫(xiě)個(gè)日歷

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

    muzhuyu 評(píng)論0 收藏0

  • 小白成長(zhǎng)日記：一步一步寫(xiě)個(gè)輪播圖插件

    摘要：并不是所有人寫(xiě)的代碼或者插件都適合小白使用，比如這是一個(gè)的滾動(dòng)插件，大多數(shù)人使用了之后發(fā)現(xiàn)滾動(dòng)不了，去作者提，其實(shí)是他們并不懂滾動(dòng)的原理。 最近在這里看了一篇關(guān)于面試的文章《回顧自己三次失敗的面試經(jīng)歷》，作者三次倒在了輪播圖上。囧，所以我也寫(xiě)個(gè)輪播圖看看。這次是用jQuery寫(xiě)的，因?yàn)樽罱恢痹谘芯縥Query插件的寫(xiě)法，所以用jQuery寫(xiě)的，而且我發(fā)現(xiàn)，我vue用太多，完全不熟悉d...

    notebin 評(píng)論0 收藏0

  • 使用vue+element ui 實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)

    摘要：使用實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)開(kāi)發(fā)工具使用技術(shù)效果圖如下話不多說(shuō)上代碼一，頁(yè)面部分二，部分首先引入以下代碼注意引入上方代碼之前需先運(yùn)行下方代碼進(jìn)行安裝然后再寫(xiě)入以下代碼這樣一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)的下拉列表就完成了 ...

    netScorpion 評(píng)論0 收藏0

  • Ajax-省市區(qū)三級(jí)聯(lián)動(dòng)

    摘要：三級(jí)聯(lián)動(dòng)此例在框架中實(shí)現(xiàn)創(chuàng)建數(shù)據(jù)地區(qū)編號(hào)上級(jí)名稱在文件夾創(chuàng)建靜態(tài)頁(yè)面省市區(qū)三級(jí)聯(lián)動(dòng)省請(qǐng)選擇市請(qǐng)選擇區(qū)請(qǐng)選擇省，市，區(qū)三級(jí)聯(lián)動(dòng)顯示市請(qǐng)選擇請(qǐng)選擇省，市，區(qū)三級(jí)聯(lián)動(dòng)顯示地區(qū)請(qǐng)選擇創(chuàng)建控制器查詢獲取 三級(jí)聯(lián)動(dòng)： 此例在ThinkPHP3.2框架中實(shí)現(xiàn) 1.創(chuàng)建數(shù)據(jù) DROP TABLE IF EXISTS `region`; CREATE TABLE `region` ( `id` in...

    jsummer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<