今天闲来无事,随手写个jquery+php+mysql来实现的省市县的三级联动。这个功能不论是对学习还真实的项目开发都是很有用的,所以在此分享给大家,希望对广大朋友有所帮助!
我把大致思路说下吧,具体的我就不多说了。
1、第一步建立一个html页面的,放置省、市、县三个select选择框,代码如下:
$(document).ready(function() {
// 加载所有的省份
$.ajax({
type: "get",
url: "region_action.php", // type=1表示查询省份
data: {"parent_id": "1", "type": "1"},
dataType: "json",
success: function(data) {
$("#provinces").html("请选择省份");
$.each(data, function(i, item) {
$("#provinces").append("" + item.region_name + "");
});
}
});
$("#provinces").change(function() {
$.ajax({
type: "get",
url: "region_action.php", // type =2表示查询市
data: {"parent_id": $(this).val(), "type": "2"},
dataType: "json",
success: function(data) {
$("#citys").html("请选择市");
$.each(data, function(i, item) {
$("#citys").append("" + item.region_name + "");
});
}
});
});
$("#citys").change(function() {
$.ajax({
type: "get",
url: "region_action.php", // type =2表示查询市
data: {"parent_id": $(this).val(), "type": "3"},
dataType: "json",
success: function(data) {
$("#countys").html("请选择县");
$.each(data, function(i, item) {
$("#countys").append("" + item.region_name + "");
});
}
});
});
});
省份:
请选择省份
市:
请选择市
县:
请选择县
第二步:建立一个处理请求的PHP文件,如下:
require_once './Config/config.php';
require_once './plugins/DBHelper.php';
$type = isset($_GET["type"]) ? $_GET["type"] : "";
$parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : "";
// 链接数据库
if ($type == "" || $parent_id == "") {
exit(json_encode(array("flag" => false, "msg" => "查询类型错误")));
} else {
// 链接数据库
$db = new DBHelper("localhost", "root", "root", "region");
$provinces = $db->getSomeResult("global_region", "region_id,region_name", "parent_id={$parent_id} and region_type={$type}");
$provinces_json = json_encode($provinces);
exit($provinces_json);
}
?>
第三步:其实这一步也是前提,就是要在mysql数据库中建一个地区表,此表结构简单,但是数据很多,大概3千多条,先列出表结构,具体数据请看代码附件。
CREATE TABLE `global_region` (
`region_id` smallint(5) unsigned NOT NULL AUTO_INCREMENT,
`parent_id` smallint(5) unsigned NOT NULL DEFAULT '0',
`region_name` varchar(120) NOT NULL DEFAULT '',
`region_type` tinyint(1) NOT NULL DEFAULT '2',
PRIMARY KEY (`region_id`),
KEY `parent_id` (`parent_id`),
KEY `region_type` (`region_type`)
) ENGINE=MyISAM AUTO_INCREMENT=3409 DEFAULT CHARSET=utf8;
最终结果如下:
最后有点要说明就是,代码中用到一些jquey,php配置文件和php数据库链接类,并没有在文章中显示,请下载完整代码!