js實現省市區三級聯動
阿新 • • 發佈:2017-05-15
pre 聯動 準備 path div data- pic asc com
電商平臺或者一些網站的個人信息部分,通常會有填寫地址的功能。該功能一般分為二級聯動(省、市)和三級聯動(省、市、區),只需要JavaScript就可以實現。
這裏介紹一種很簡潔易用的方法。參考地址:https://github.com/fengyuanchen/distpicker
獲取上面Github目錄下的dist/distpicker.js文件,然後準備一份jquery.js文件。
接下來,新建一個測試的HTML頁面。
首先,引入以上的兩個js文件:
<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>
js實現省市區三級聯動