在ThinkPHP框架中进行多级联动选择器,需要用到Ajax技术和jQuery插件。具体实现步骤如下:
1.创建控制器方法,用于处理Ajax请求,返回下一级联动数据。
public function getRegion()
{
$parent_id = input('parent_id', 0, 'intval');
$regionModel = new RegionModel();
$list = $regionModel->getRegionByParentId($parent_id);
return json($list);
}
2.创建前端页面,使用jQuery和Ajax实现多级联动选择器。
<select name="province" id="province">
<option value="">请选择省份</option>
<?php foreach ($provinceList as $province): ?>
<option value="<?php echo $province['id']; ?>"><?php echo $province['name']; ?></option>
<?php endforeach; ?>
</select>
<select name="city" id="city">
<option value="">请选择城市</option>
</select>
<select name="district" id="district">
<option value="">请选择区县</option>
</select>
<script type="text/javascript">
$(function(){
$('#province').change(function(){
var province_id = $(this).val();
if (province_id == '') {
$('#city').html('<option value="">请选择城市</option>');
$('#district').html('<option value="">请选择区县</option>');
return false;
}
$.get('/region/getRegion', {'parent_id': province_id}, function(data){
var options = '<option value="">请选择城市</option>';
$.each(data, function(i, item){
options += '<option value="' + item.id + '">' + item.name + '</option>';
});
$('#city').html(options);
$('#district').html('<option value="">请选择区县</option>');
});
});
$('#city').change(function(){
var city_id = $(this).val();
if (city_id == '') {
$('#district').html('<option value="">请选择区县</option>');
return false;
}
$.get('/region/getRegion', {'parent_id': city_id}, function(data){
var options = '<option value="">请选择区县</option>';
$.each(data, function(i, item){
options += '<option value="' + item.id + '">' + item.name + '</option>';
});
$('#district').html(options);
});
});
});
</script>
其中,通过Ajax请求控制器方法,获取下一级联动数据,并使用jQuery动态更新下一级联动选择器的选项。
此外,需要在控制器中编写获取下一级联动数据的方法,以及在模型中编写查询下一级联动数据的方法。在前端页面中需要引入jQuery和Ajax库,并将控制器方法的url作为Ajax请求的url。