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

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

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

前言

插件功能只滿足我司業(yè)務需求，如果希望有更多功能的，可在下方留言，我盡量擴展！如果你有需要或者喜歡的話，可以給我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í)行的回調函數(shù)

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

預覽

總結

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

您可能感興趣的文章:

js 獲取input點選按鈕的值的方法
這篇文章主要介紹了js 如何獲取input點選按鈕的值,需要的朋友可以參考下
2014-04-04
layui獲取多選框中的值方法
今天小編就為大家分享一篇layui獲取多選框中的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
JavaScript中合并數(shù)組的N種方法
這篇文章主要介紹了JavaScript中合并數(shù)組的N種方法,本文使用concat、循環(huán)插入、reduce等方法合并JavaScript數(shù)組,需要的朋友可以參考下
2014-09-09
javascript globalStorage類代碼
非IE瀏覽器“userdata”的解決方案
2009-06-06
JS自定義右鍵菜單實現(xiàn)代碼解析
這篇文章主要介紹了JS自定義右鍵菜單實現(xiàn)代碼解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-07-07
JavaScript之Getters和Setters 平臺支持等詳細介紹
現(xiàn)在，JavaScript的Getters和Setters使用非常廣泛，它和每個JavaScript開發(fā)者的切身利益息息相關,我們先來快速了解什么是Getters和Setters，以及它們?yōu)槭裁春苡杏?然后，我們來看看現(xiàn)在都有哪些平臺支持Gettets和Setters
2012-12-12
js學習總結之dom2級事件基礎知識詳解
這篇文章主要為大家詳細介紹了js學習總結之dom2級事件基礎知識，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
JavaScript必看小技巧(必看)
下面小編就為大家?guī)硪黄狫avaScript必看小技巧(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JavaScript數(shù)據結構之雙向鏈表定義與使用方法示例
這篇文章主要介紹了JavaScript數(shù)據結構之雙向鏈表定義與使用方法,簡單介紹了雙向鏈表的原理,并結合實例形式分析了雙向鏈表的定義與使用方法,需要的朋友可以參考下
2017-10-10
JavaScript實現(xiàn)圖片懶加載的三種常用方法總結
懶加載是一種對網頁性能優(yōu)化的方式，也是我們經常會用到的技術，這篇文章為大家整理了JavaScript實現(xiàn)圖片懶加載的三種常用方法，希望對大家有所幫助
2023-06-06