建表语句：
CREATE TABLE `tp_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',
`agency_id` smallint(5) unsigned NOT NULL DEFAULT '0',
`status` tinyint(4) NOT NULL COMMENT '0无效果，1已开通，2待开通，3，招募加盟商',
PRIMARY KEY (`region_id`),
KEY `parent_id` (`parent_id`),
KEY `region_type` (`region_type`),
KEY `agency_id` (`agency_id`)
) ENGINE=MyISAM AUTO_INCREMENT=3409 DEFAULT CHARSET=utf8; 不想自己创建的朋友呢,可以去百度下载一个单独的地区表(里面已经有了地区数据了)；我这里用的Thinkphp版本是3.2.2 其实用法都一样！照葫芦画瓢，相信大家都会！
首先我们随便来一个HTML代码。我们这里使用Jquery1.7.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>phpsafe--PHP开发之Thinkphp实现Ajax地区三级联动</title>
<script src="__PUBLIC__/Home/jquery-1.7.2.min.js"></script>
</head>
<body>
<!-- 省份 -->
<select name="pro" id="pro">
<option></option>
</select>
<!-- 城市 -->
<select name="city" id="city">
<option></option>
</select>
<!-- 区县 -->
<select name="area" id="area">
<option></option>
</select>
</body>
</html>Ok 接下来 我们需要先把省份给遍历出来。（我已经将数据库一些简单的已经全部配置好了）代码如下：<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller
{
public function Index()
{
if (IS_POST) {
} else {
$parent_id['parent_id'] = 1;
$region = M('Region')->where($parent_id)->select();
$this->assign('region',$region);
$this->display();
}
}
}这里为什么用到IS_POST 因为我请求打算用post请求 所以我们为了方便可以在同一个方法里面搞定，我们用IS_POST就可以简单的区分！接下来直接到Index.html模板里面将数据用Foreach遍历出来。
<!-- 省份 -->
<select name="pro" id="pro">
<foreach name="region" item="v">
<option value="{$v.region_id}">{$v.region_name}</option>
</foreach>
</select>我们看看是否成功遍历！
OK了 省份已经遍历出来了 那么接下来都简单多了,我们只需要在用户选择地区的时候出发Ajax代码把父类ID用Ajax发送到Index方法处理就好了。代码如下：(我们需要接收json格式的数据)
<script>
$('#pro').change(function(){
$.ajax({
type:"post",
url:"{:U('Index/Index')}",
data:'pro_id='+$('#pro').val(),
dataType:"json",
success:function(data){
console.log(data);
}
});
});
</script>现在我们打印一下POST数据 看看结果是什么public function Index()
{
if (IS_POST) {
dump($_POST);
} else {
$parent_id['parent_id'] = 1;
$region = M('Region')->where($parent_id)->select();
$this->assign('region',$region);
$this->display();
}
}
我们可以看到 打印出来的是广东的id
接下来需要拿这个父类的id 查询该父类下面有多少个对应的子类 并且将数据处理成Json格式在输出出去。代码如下：
$parent_id['parent_id'] = I('post.pro_id','addslashes');
$region = M('Region')->where($parent_id)->select();
$opt = '<option>--请选择市区--</option>';
foreach($region as $key=>$val){
$opt .= "<option value='{$val['region_id']}'>{$val['region_name']}</option>";
}
echo json_encode($opt);
接下来，我们在用Jquery 将刚才处理完的数据给他直接丢到市的下拉框里面。$('#pro').change(function(){
$.ajax({
type:"post",
url:"{:U('Index/Index')}",
data:'pro_id='+$('#pro').val(),
dataType:"json",
success:function(data){
$('#city').html(data);
}
});
});
Ok，市区查询出来了。区县也是一样，我们查询用该市的ID作为条件 去查询底下有多少个区
代码如下：
$('#city').change(function(){
$.ajax({
type:"post",
url:"{:U('Index/Index')}",
data:'pro_id='+$('#city').val(),
dataType:"json",
success:function(data){
$('#area').html(data);
}
});
});其实这里我们可以分为多个区间来判断 市的一个 区的一个 但是我这里简单起见 就放在一起了。每一次请求一次 数据就会重新覆盖，所以呢，不会存在以前的数据存在的问题！
处理的数据是一样的。所以我们在Ajax请求的时候 需要保证参数一致 在Index方法里面可以被接收到。接下来的操作都是一样的，只是遍历的地方不一样而已。
其实原生态的代码也是同样的原理。没有任何的区别。看完以后，有没有觉得很简单呢？？
复制或转载请注明出处 本文来自：Poacher'Blog：http://www.phpsafe.com/post-27.html
最佳答案
