原生js實現(xiàn)省市區(qū)三級聯(lián)動代碼分享

更新時間：2018年02月12日 09:13:41 投稿：laozhang

這篇文章主要介紹了原生js實現(xiàn)省市區(qū)三級聯(lián)動功能以及代碼分享，對此有需要的朋友可以參考學(xué)習(xí)下。

前言

插件功能只滿足我司業(yè)務(wù)需求，如果希望有更多功能的，可在下方留言，我盡量擴展！如果你有需要或者喜歡的話，可以給我github來個star

準備

<div id="wrap"></div>

頁面中的容器標簽不限制，只需給個id就行

var address = new Address({
  wrapId: 'wrap',
  showArr: ['provinces','citys','areas'],
  beforeCreat:function(){
    console.log("beforeCreat")
  },
  afterCreat:function(){
    console.log('afterCreat');
  }
})

wrapId:"wrap" // 此處的wrap就是上面容器的id 
showArr: ['provinces','citys','areas'] // 此處分別代表省、市、區(qū)容器的id

舉個例子：如果傳遞的數(shù)組['provinces','citys','areas']長度為3，那么將會出現(xiàn)省市區(qū)，數(shù)組中三個字符串分別是省、市、區(qū)容器的id

如傳遞的數(shù)組['provinces','citys']長度為2個，那么將會出現(xiàn)省市，數(shù)組中的兩個字符串分別是省、市容器的id

如數(shù)組長度為1的時候就不說了

beforeCreat 插件開始創(chuàng)建前執(zhí)行的回調(diào)函數(shù)

afterCreat 插件創(chuàng)建完成后執(zhí)行的回調(diào)函數(shù)

預(yù)覽

總結(jié)

如有什么功能需要增加的，可在評論區(qū)留言，我盡量滿足。如有什么疏忽或錯誤，希望您指出。我會盡早修改，以免誤導(dǎo)他人。

您可能感興趣的文章:

相關(guān)文章

JS生成不重復(fù)的隨機數(shù)組的簡單實例
下面小編就為大家?guī)硪黄狫S生成不重復(fù)的隨機數(shù)組的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
Javascript動畫效果（2）
這篇文章主要為大家詳細介紹了第二篇Javascript動畫效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
微信小程序?qū)崿F(xiàn)傳參數(shù)的幾種方法示例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)傳參數(shù)的幾種方法，分別是navigator跳轉(zhuǎn)時、全局變量、列表index下標取值以及form表單傳值的相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01
使用Microsoft Ajax Minifier減小JavaScript文件大小的方法
大家用來減小JavaScript文件下載大小的常見的方式有2種：壓縮（compression）和縮?。╩inification）。
2010-04-04
JavaScript頁面回流與重繪
這篇文章主要介紹了JavaScript頁面回流與重繪,一個html頁面是一個整體，當這個整體中的某一個部分發(fā)生改變，那么這個頁面整體會重新進行渲染，而如果我們采用添加標簽的方式，每次添加一個標簽，就會讓每一次頁面都重新渲染，性能急劇下降,下面來看看具體內(nèi)容吧
2022-01-01
微信網(wǎng)頁登錄邏輯與實現(xiàn)方法
這篇文章主要介紹了微信網(wǎng)頁登錄邏輯與實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
JavaScript創(chuàng)建對象的四種常用模式實例分析
這篇文章主要介紹了JavaScript創(chuàng)建對象的四種常用模式,結(jié)合實例形式分析了javascript使用工廠模式、構(gòu)造函數(shù)模式、原型模式及動態(tài)原型模式創(chuàng)建對象的相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2019-01-01
JS實現(xiàn)兩個大數(shù)(整數(shù))相乘
大數(shù)，即超出語言所能表示的數(shù)字最大范圍的數(shù)字，那么如何實現(xiàn)兩個大數(shù)相乘呢？下面有個不錯的方法，大家可以參考下
2014-04-04
Javascript HTML5 Canvas實現(xiàn)的一個畫板
這篇文章主要為大家詳細介紹了Javascript HTML5 Canvas實現(xiàn)的一個畫板的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
IFrame跨域高度自適應(yīng)實現(xiàn)代碼
最近在做項目中，遇到一個問題，就是iframe高度的自適應(yīng)問題，以下是解決辦法
2012-08-08