基於city-picker的省市區三級聯動列表
阿新 • • 發佈：2018-03-01
tro 江蘇 tex nbsp log oct gpo title 下載
網址： http://tshi0912.github.io/city-picker/
下載： city-picker-master.zip
復制 dist 下內容，到項目下就可以使用
引入4個文件
有html和js倆種用法
1、HTML
2、JS
清除 city picker 選中內容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/city-picker.data.js" ></script> <script type="text/javascript" src="js/city-picker.js" ></script> <link rel="stylesheet" href="css/city-picker.css" /> <title>JS用法</title> <script> $(function(){ $("#area").citypicker(); $("#reset").click(function(){ $("#area").citypicker(‘reset‘); }) }) </script> </head> <body> <div style="position:relative;"> <input id="area" type =‘text‘ style ="width:50%;"> <input type="button" id="reset" value="重置"/> </ div> </body> </html>
效果圖:
動態賦值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/city-picker.data.js" ></script> <script type="text/javascript" src="js/city-picker.js" ></script> <link rel="stylesheet" href="css/city-picker.css" /> <title>動態賦值</title> <script type="text/javascript"> $(function(){ $("#area").citypicker(); $("#setBtn").click(function(){ //賦值錢，必須先執行reset、destory $("#area").citypicker(‘reset‘); $("#area").citypicker(‘destroy‘); $("#area").citypicker({ province: ‘江蘇省‘, city: ‘常州市‘, district: ‘溧陽市‘ }); }) }) </script> </head> <body> <div style ="position:relative;"> <input id="area" type =‘text‘ style ="width:50%;"> <input type="button" id="setBtn" value="賦值"/> </ div> </body> </html>
基於city-picker的省市區三級聯動列表