多表省市区三级联动选择

浏览:2580 发布日期:2017/03/07 分类:技术分享
声明:根据之前本站大牛单表例子修改,技术贴链接如下
http://www.thinkphp.cn/topic/41905.html
数据库源码链接
献上效果图


html 部分


ajax部分


先对<select>下拉框取值 将数据传给后台

控制器部分


对前台数据进行接收,并作为条件从数据库中查询数据返回给前台页面





注释:Province()就是先把所有的省查出来,通过


通过 <foreach>标签先把省数据遍历出来




数据库部分

三张表(province)省 (city)市 (district) 县 数据在百度上搜有很多的 注意在查询的时候注意自己表中的字段



源代码:


public function Province(){
$province=new \Model\ProvinceModel();

$district=M('District');

$prov=$province->select();
//dump($prov);die();
return $prov;


}
public function City(){
$city=M('City');
//dump($_POST);die();
$provinceid['provinceid']=$_POST['pro_id'];


$cityinfo=$city->where($provinceid)->select();
//dump($cityinfo);die();
$opt='<option>--请选择市区--</option>';

foreach ($cityinfo as $key => $value) {
# code...
$opt .="<option value='{$value['id']}'>{$value['name']}</option>";
}
echo json_encode($opt);
//dump($cityinfo);die();
}

public function District(){
$district=M('District');
//dump($_POST);die();
$cityid['cityid']=$_POST['city_id'];


$districtinfo=$district->where($cityid)->select();
//dump($cityinfo);die();
$opt='<option>--请选择市县--</option>';

foreach ($districtinfo as $key => $value) {
# code...
$opt .="<option value='{$value['id']}'>{$value['name']}</option>";
}
echo json_encode($opt);
//dump($cityinfo);die();
}


*****************************************************************************
<script >
//三级联动的ajax

$('#city').change(function(){
//alert($('#pro').val());
$city=$('#city').val();//这变量是有数据的
// alert($prov);

$.ajax({
type:"post",
url:"{:U('User/District')}",
data:'city_id='+$city,
dataType:'json',
success:function(data){
$('#area').html(data);
}
});
});

$('#pro').change(function(){
//alert($('#pro').val());
$prov=$('#pro').val();//这变量是有数据的
// alert($prov);

$.ajax({
type:"post",
url:"{:U('User/City')}",
data:'pro_id='+$prov,
dataType:'json',
success:function(data){
$('#city').html(data);
}
});
});

</script>
**************************************************************************
<div class="">
<!-- 省份 -->
<select name="pro" id="pro" ">
<option>--请选择省份--</option>
<foreach name='prov' item='v'>
<option value="{$v.id}">{$v.name} </option>
</foreach>
</select>
<!-- 城市 -->
<select name="city" id="city">
<option></option>
</select>
<!-- 区县 -->
<select name="area" id="area">
<option></option>
</select>
</div>
最佳答案
评论( 相关
后面还有条评论,点击查看>>