网址: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> - 清除城市选择器选中内容
(function(){
(功能(){
(“#return”)。click(function(){
( “#reset”)。点击(函数(){
“'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>