省市区三级联动
HTML
<div class="am-form-content address">
<select name="province" id="province" onchange="loadRegion('province',2,'city');">
<option value="0" selected>省份/直辖市</option>
{volist name="province" id="vo"}
<option value="{$vo.id}" >{$vo.name}</option>
{/volist}
</select>
<select name="city" id="city" onchange="loadRegion('city',3,'town');">
<option value="0">市/县</option>
</select>
<select name="town" id="town">
<option value="0">镇/区</option>
</select>
</div>
方法
public function address()
{
$where['uid']=cookie('id');
$sql=db('ress')->field('a.*,b.name as shengnamne, c.name as shiname , d.name as qname')
->where($where)->alias('a')
->join('tree b','a.sheng=b.id')
->join('tree c','a.shi=c.id')
->join('tree d','a.qu=d.id')
->select();
// var_dump($sql);
if($sql){
$this->assign('sql',$sql);
}else{
$this->assign('sql','');
}
//三级联动上面与三级联动没关系
$province = Db('tree')->where ( array('pid'=>1) )->select ();//进入页面直接查询省并赋值到页面
$this->assign('province',$province);
return $this->fetch();
}
//三级联动
public function getRegion(){
$map['pid']=$_REQUEST["pid"];//查询父id
$map['type']=$_REQUEST["type"];//查询那一级
// $list=$Region->where($map)->select();
$list = db('tree')->where($map)->select();
// echo json_encode($list);
return $list;
}
<!-- 省市区三联动 js -->
<script>
function loadRegion(sel,type_id,selName,url="{:url('Index/getRegion')}"){
jQuery("#"+selName+" option").each(function(){
jQuery(this).remove();
});
// jQuery("<option value=0>请选择</option>").appendTo(jQuery("#"+selName));
$('#'+selName).append('<option value=0>请选择</option>');
if(jQuery("#"+sel).val()==0){
return;
}
$.ajax({
url:url,
data:{pid:jQuery("#"+sel).val(),type:type_id},
dataType:'json',
type:'get',
success:function(data){
if(data){
jQuery.each(data,function(idx,item){
jQuery("<option value="+item.id+">"+item.name+"</option>").appendTo(jQuery("#"+selName));
});
}else{
jQuery("<option value='0'>请选择</option>").appendTo(jQuery("#"+selName));
}
}
})
jQuery.getJSON(url,{pid:jQuery("#"+sel).val(),type:type_id},
function(data){
if(data){
jQuery.each(data,function(idx,item){
jQuery("<option value="+item.id+">"+item.name+"</option>").appendTo(jQuery("#"+selName));
});
}else{
jQuery("<option value='0'>请选择</option>").appendTo(jQuery("#"+selName));
}
}
);
}
</script>
数据库
链接：https://pan.baidu.com/s/1NslU8kmY1g52i_2L1oY8HA
提取码：qv64
