city-picker省市区选择三级联动列表_综合

网址：HTTP：//tshi0912.github.io/city-picker/
这是城市选取器的下载网址下载：city-picker-master.zip
这里写图片描述
还需要jQuery的文件
首先，我们需要在HTML页面中引入以下4个文件

<script type="text/javascript" src="js/jquery-1.8.3.js" ></script><script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script><script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script><link rel="stylesheet" href="js/citypicker/css/city-picker.css" />

一，两种指定城市选择器用法

HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML用法</title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script> <script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script> <link rel="stylesheet" href="js/citypicker/css/city-picker.css" /> </head> <body> <div style="position: relative;"> <input name="area" type="text" data-toggle="city-picker" size="80"/> </div> </body> </html>
JS
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS用法</title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script> <script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script> <link rel="stylesheet" href="js/citypicker/css/city-picker.css" /> <script type="text/javascript"> $(function(){ $("#area").citypicker(); }); </script> </head> <body> <div style="position: relative;"> <input id="area" name="area" type="text" size="80"/> </div> </body> </html>
清除城市选择器选中内容

（“＃return”）。click（function（）{ $(function(){$
$("#reset").click(function(){$

“'4。动态赋值

 charset="utf-8" /><title>JS用法</title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script><script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script><script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script><link rel="stylesheet" href="js/citypicker/css/city-picker.css" /><script type="text/javascript">$(function(){
     $("#area").citypicker();$("#setValBtn").click(function(){
     // 赋值前，必须先执行 reset、destroy$('#area').citypicker('reset');$('#area').citypicker('destroy');$('#area').citypicker({province: '江苏省',city: '常州市',district: '溧阳市'});});});</script></head><body><div style="position: relative;"><input id="area" name="area" type="text" size="80"/><input type="button" id="setValBtn" value="赋值" /></div></body>
</html>