三级联动:
此例在ThinkPHP3.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
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
省市区三级联动select{
width: 150px;
}
请选择
{$province.name}
请选择
请选择
//省,市,区三级联动(显示市)
$("#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).val("0");
$(option).html("请选择");
var option1=$("");
$(option1).val("0");
$(option1).html("请选择");
$("#cityId").html(option);
$("#districtId").html(option1);
for(var i in city){
var 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')}",
Type:"POST",
data:"cityId="+cityId,
dataType:"json",
success:function(data){
var district = data.district;
var option=$("");
$(option).val("0");
$(option).html("请选择");
$("#districtId").html(option);
for(var i in district){
var option=$("");
$(option).val(district[i]['id']);
$(option).html(district[i]['name']);
$("#districtId").append(option);
}
}
});
});
3.创建控制器DemoController.class.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));
}
}