使用原生js實現(xiàn)省市區(qū)三級聯(lián)動

前言

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

準備

<p id="wrap"></p>

頁面中的容器標簽不限制，只需給個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ù)覽

上面是我整理給大家的，希望今后會對大家有幫助。

相關(guān)文章：

在Webpack中路徑壓縮圖片上傳尺寸獲取的問題（詳細教程）

在ES6中詳細解讀let和閉包

在vue+iview+less+echarts中實戰(zhàn)項目（詳細教程）

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com