虛擬主機域名注冊-常見問題網絡編程問題JS

js實現省市區縣三級聯動 可自定義初始值

電商平臺或者一些網站的個人信息部分,通常會有填寫地址的功能。該功能一般分為二級聯動(省、市)和三級聯動(省、市、區),只需要JavaScript就可以實現。

這里介紹一種很簡潔易用的方法。參考地址:https://github.com/fengyuanchen/distpicker

獲取上面Github目錄下的dist/distpicker.js文件,然后準備一份jquery.js文件。

接下來,新建一個測試的HTML頁面。

首先,引入以上的兩個js文件:

【注意】jquery文件一定要在distpicker前面,否則無法生效

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/distpicker.js"></script>

然后,新建select選擇器:

<div><!-- container -->
  <select></select><!-- province -->
  <select></select><!-- city -->
  <select></select><!-- district -->
</div>

要想實現三級聯動,需要進行初始化,方法就是為div元素添加一個屬性:

<div data-toggle="distpicker">
  <select></select>
  <select></select>
  <select></select>
</div>

有時,根據自己需要,會為選擇框設定默認值,同樣需要為select元素添加屬性:

<div data-toggle="distpicker">
  <select data-province="---- 選擇省 ----"></select>
  <select data-city="---- 選擇市 ----"></select>
  <select data-district="---- 選擇區 ----"></select>
</div>


來源:
閱讀:980
日期:2017-11-03

【 字體: 】 
上一篇:form提交不同utf8 gb2312編碼的數據亂碼
下一篇:百度編輯器 UEditor上傳圖片 title數字修改成圖片名稱
  >> 相關文章
 
發表評論

字數0
請輸入驗證碼:


  • 尊重網上道德,遵守中華人民共和國的各項有關法律法規
  • 承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
  • 本站管理人員有權保留或刪除其管轄留言中的任意內容
  • 本站有權在網站內轉載或引用您的評論
  • 參與本評論即表明您已經閱讀并接受上述條款
網友評論
沒有相關評論。
會員 客服 QQ 電話 充值 工單
Top

24小時客服熱線

①18036323215

②18036323215

咨詢售后問題請進入 工單提問

海南飞鱼游戏技巧