基于thinkphp和ajax的省市区三级联动

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

练习，就当练习。

省市区三级联动，样式如下图所示：

1，导入两个js文件并且导入数据库文件。

两个js文件分别是jquery-2.1.4.min.js和jquery-1.js，数据库文件，见附件。

2，建一个index.html

<div>
<label>所在地点</label>
<select name="province_id" id="province_id" style="width:150px;">
<option>请选择</option>
<volist name="province_list" id="province">
<option value="{$province.region_id}">{$province.region_name}</option>
</volist>
</select>
<select name="city_id" id="city_id" style="width:150px;" >
<option>请选择</option>
<volist name="city_list" id="city">
<option value="{$city.region_id}" selected="selected">{$city.region_name}</option>
</volist>
</select>
<select name="district_id" id="district_id" style="width:150px;" >
<option value="0">请选择</option>
<volist name="dis_list" id="dis">
<option value="{$dis.region_id}" selected="selected">{$dis.region_name}</option>
</volist>
</select>
</div>

写ajax啦，一个是获取市，一个是获取县区。

2，后台代码很重要。

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
//获取省和直辖市
public function index(){
$listObj = M('region');
$whereprovince['top_parentid'] = 0;
$listprovince = $listObj->where($whereprovince)->select();
$this->assign("province_list",$listprovince); $this->display();
}
//获取地级市
public function get_citys(){
$listObj = M('region');
$where['top_parentid'] = I('province_id');
$where['level'] = 2;
$list = $listObj->where($where)->select();
$data=array('status'=>0,'city'=>$list);
header("Content-type: application/json");
exit(json_encode($data));
}
//获取地级县
public function get_district(){
$listObj = M('region');
$where['parent_id'] = I('city_id');
$where['level'] = 3;
$list = $listObj->where($where)->select();
$data=array('status'=>0,'district'=>$list);
header("Content-type: application/json");
exit(json_encode($data));
}