在开发中遇到三级联动,比如说三级分类的联动和地区的联动,点选第一级,第二级跟着动;点选第二级,第三级跟着动。具体的实施操作办法如下:
在开发中遇到三级联动,比如说三级分类的联动和地区的联动,点选第一级,第二级跟着动;点选第二级,第三级跟着动,如图:
具体的实施操作办法如下:

前端<div class="form-group">
<label class="col-sm-2 control-label">所在地区</label>
<div class="col-sm-10">
<select id="province_list" name="province" class="form-control form-control-50 sm-select">
<option value="">--请选择--</option>
<volist name="province" id="item">
<option value="{$item['id']}">{$item['region_name']}</option>
</volist>
</select>
<select id="city_list" name="city" class="form-control form-control-50 sm-select-t sm-select">
<option value="">-- 请选择--</option>
</select>
<select id="area_list" name="area" class="form-control form-control-50 sm-select-t">
<option value="">-- 请选择--</option>
</select>
</div>
</div>


$('#province_list').change(function(){
$('#city_list option[value!=""]').remove();
$('#area_list option[value!=""]').remove();
var province = $(this).val();
$.ajax({
url:"{:U('Require/ajaxGetRegion')}",
type:'get',
data:{id:province},
success:function(data){
var html ='<option value="">--城市--</option>';
for(var i in data){
html += '<option value="'+data[i].id+'">'+data[i].region_name+'</option>';
}
$('#city_list').html(html);
}
})
});

$('#city_list').change(function(){
$('#area_list option[value!=""]').remove();
var city = $(this).val();
$.ajax({
url:"{:U('Require/ajaxGetRegion')}",
type:'get',
data:{id:city},
success:function(data){
var html ='<option value="">--地区--</option>';
for(var i in data){
html += '<option value="'+data[i].id+'">'+data[i].region_name+'</option>';
}
$('#area_list').html(html);
}
})
});后端/**
* 获取地区
*/
public function ajaxGetRegion(){
$where['parent_id'] = I('get.id');
$result = M('Region')->where($where)->field('id,region_name')->order('sort desc')->select();
$this->ajaxReturn($result,'JSON');
}数据库文件见附件

评论() 相关

收藏

赞

jinjin

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。