首先呢,我们准备好TP框架还有一个表,地区表,其中包含以下字段：
建表语句：
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
phpsafe--PHP开发之Thinkphp实现Ajax地区三级联动
复制代码
Ok 接下来 我们需要先把省份给遍历出来。（我已经将数据库一些简单的已经全部配置好了）代码如下：where($parent_id)->select();
$this->assign('region',$region);
$this->display();
}
}
}这里为什么用到IS_POST 因为我请求打算用post请求 所以我们为了方便可以在同一个方法里面搞定，我们用IS_POST就可以简单的区分！
接下来直接到Index.html模板里面将数据用Foreach遍历出来。
{$v.region_name}
OK了 省份已经遍历出来了 那么接下来都简单多了,我们只需要在用户选择地区的时候出发Ajax代码把父类ID用Ajax发送到Index方法处理就好了。代码如下：(我们需要接收json格式的数据)
现在我们打印一下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 = '--请选择市区--';
foreach($region as $key=>$val){
$opt .= "{$val['region_name']}";
}
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方法里面可以被接收到。接下来的操作都是一样的，只是遍历的地方不一样而已。
其实原生态的代码也是同样的原理。没有任何的区别。看完以后，有没有觉得很简单呢？？