JQuery --- CityPicker入门
胡越
一、CityPicker简介
CityPicker是省市区三级联动JQuery插件
CityPicker官网下载地址：
http://tshi0912.github.io/city-picker/
二、环境准备
2.1 复制dist下的js、css、image到项目中
2.2 引入文件
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/citypicker/city-picker.data.js"></script>
<script type="text/javascript" src="../js/citypicker/city-picker.js"></script>
<link rel="stylesheet" href="../css/city-picker.css"/>
三、简单使用
3.1 基于HTML的方式使用CityPicker
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>city-picker</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/citypicker/city-picker.data.js"></script>
<script type="text/javascript" src="../js/citypicker/city-picker.js"></script>
<link rel="stylesheet" href="../css/city-picker.css"/>
</head>
<body>
<div style="position:relative">
<input type="text" name="area" data-toggle="city-picker" placeholder="请选择省/市/区" size="80" />
</div>
</body>
</html>
注：div上必须要加上style="position:relative"布局样式
3.2 基于JS的方式使用CityPicker
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>city-picker</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/citypicker/city-picker.data.js"></script>
<script type="text/javascript" src="../js/citypicker/city-picker.js"></script>
<link rel="stylesheet" href="../css/city-picker.css"/>
<script type="text/javascript">
$(function () {
$("#area").citypicker();
})
</script>
</head>
<body>
<div style="position:relative">
<input type="text" name="area" id="area" placeholder="请选择省/市/区" size="80" />
</div>
</body>
</html>
3.3 JS实现重置功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>city-picker</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/citypicker/city-picker.data.js"></script>
<script type="text/javascript" src="../js/citypicker/city-picker.js"></script>
<link rel="stylesheet" href="../css/city-picker.css"/>
<script type="text/javascript">
$(function () {
$("#area").citypicker();
$("#reset").click(function () {
$("#area").citypicker("reset");
})
})
</script>
</head>
<body>
<div style="position:relative">
<input type="text" name="area" id="area" size="80" />
<input type="button" id="reset" value="重置">
</div>
</body>
</html>
3.4 JS实现赋值功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>city-picker</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/citypicker/city-picker.data.js"></script>
<script type="text/javascript" src="../js/citypicker/city-picker.js"></script>
<link rel="stylesheet" href="../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:"XX省",
city:"XX市",
district:"XX区"
});
})
})
</script>
</head>
<body>
<div style="position:relative">
<input type="text" name="area" id="area" size="80" />
<input type="button" id="setValBtn" value="赋值">
</div>
</body>
</html>
注：在使用赋值前必须要执行reset、destroy方法
类似资料：