ajax 地区联动,Ajax-省市区三级联动

三级联动：

此例在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));

}

}