前端之家收集整理的这篇文章主要介绍了
Ajax-省市区三级联动，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
三级联动：
@H_
301_2@此例在Think
PHP3.2框架中实现
1.创建数据
DROP TABLE IF EXISTS `region`;
CREATE TABLE `region` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '地区编号',`parentid` int(11) NOT NULL COMMENT '上级id',`name` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '名称',PRIMARY KEY (`id`),KEY `district_upid_index` (`parentid`),KEY `district_name_index` (`name`)
) ENGINE=MyISAM AUTO_INCREMENT=91154 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
2.在view文件夹创建静态页面index.html
<!doctype html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>省市区三级联动</title>
<style>
select{
width: 150px;
}
</style>
</head>
<body>
<!--省-->
<select name="provinceId" id="provinceId">
<option>请选择</option>
<volist name="provinceList" id="province">
<option value="{$province.id}">{$province.name}</option>
</volist>
</select>
<!--市-->
<select name="cityId" id="cityId">
<option>请选择</option>
</select>
<!--区-->
<select name="districtId" id="districtId">
<option>请选择</option>
</select>
</body>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
//省，市，区三级联动(显示市)
$("#provinceId").change(function(){
var provinceId=$(this).val();
$.ajax({
url:"{:U('Demo/regionAjaxGetCitys')}",Type:"POST",data:"provinceId="+provinceId,dataType:"json",success:function(data){
var city = data.city;
var option=$("<option></option>");
$(option).val("0");
$(option).html("请选择");
var option1=$("<option></option>");
$(option1).val("0");
$(option1).html("请选择");
$("#cityId").html(option);
$("#districtId").html(option1);
for(var i in city){
var option=$("<option></option>");
$(option).val(city[i]['id']);
$(option).html(city[i]['name']);
$("#cityId").append(option);
}
}
});
});
//省，市，区三级联动(显示地区)
$("#cityId").change(function(){
var cityId=$(this).val();
$.ajax({
url:"{:U('Demo/regionAjaxGetdDistrict')}",data:"cityId="+cityId,success:function(data){
var district = data.district;
var option=$("<option></option>");
$(option).val("0");
$(option).html("请选择");
$("#districtId").html(option);
for(var i in district){
var option=$("<option></option>");
$(option).val(district[i]['id']);
$(option).html(district[i]['name']);
$("#districtId").append(option);
}
}
});
});
</script>
</html>
3.创建控制器DemoController.class.PHP
<?PHP
namespace Home\Controller;
class DemoController extends BaseController
{
/**
*查询
*/
public function getList($where){
$regionModel=D('Region');
$list = $regionModel->where($where)->select();
return $list;
}
/**
*获取省和直辖市
*/
public function index(){
$where['parentid'] = 0;
$listprovince = $this->getList($where);
$this->assign("provinceList",$listprovince);
$this->display();
}
/**
*省市区三级联动ajax（获取市）
*/
public function regionAjaxGetCitys(){
$where['parentid'] = I('provinceId');
$list = $this->getList($where);
$data=array('city'=>$list);
header("Content-type: application/json");
exit(json_encode($data));
}
/**
*省市区三级联动ajax(获取地区)
*/
public function regionAjaxGetdDistrict(){
$where['parentid'] = I('cityId');
$list = $this->getList($where);
$data=array('district'=>$list);
header("Content-type: application/json");
exit(json_encode($data));
}
}
