在开发中遇到三级联动，比如说三级分类的联动和地区的联动,点选第一级，第二级跟着动；点选第二级，第三级跟着动，如图：
具体的实施操作办法如下：
前端
<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');
}数据库文件见附件