快捷導(dǎo)航

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

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

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

前言

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

準(zhǔn)備

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

頁面中的容器標(biāo)簽不限制，只需給個(gè)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

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

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

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

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

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

預(yù)覽

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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