用tp6写一个三级联动
时间: 2023-12-29 11:55:34 浏览: 90
一个三级联动功能
三级联动通常用于省市区选择,下面是一个基于ThinkPHP 6的简单实现:
首先,我们需要在数据库中创建三个表,分别为`province`、`city`和`district`,每个表至少需要包含`id`和`name`两个字段。
接下来,我们在控制器中编写三个方法,分别用于获取省、市和区的列表:
```php
public function getProvinces()
{
$provinces = Db::table('province')->select();
return json($provinces);
}
public function getCities($provinceId)
{
$cities = Db::table('city')->where('province_id', $provinceId)->select();
return json($cities);
}
public function getDistricts($cityId)
{
$districts = Db::table('district')->where('city_id', $cityId)->select();
return json($districts);
}
```
然后,在前端页面中,我们可以使用jQuery来实现三级联动。首先,我们需要在HTML中添加三个下拉框:
```html
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
```
接着,我们编写以下JavaScript代码:
```javascript
$(function() {
// 获取省份列表
$.get('/index.php/index/getProvinces', function(data) {
$.each(data, function(index, province) {
$('#province').append('<option value="' + province.id + '">' + province.name + '</option>');
});
});
// 省份下拉框变化时,获取对应城市列表
$('#province').change(function() {
var provinceId = $(this).val();
$('#city').empty().append('<option value="">请选择城市</option>');
$('#district').empty().append('<option value="">请选择区县</option>');
if (provinceId) {
$.get('/index.php/index/getCities?provinceId=' + provinceId, function(data) {
$.each(data, function(index, city) {
$('#city').append('<option value="' + city.id + '">' + city.name + '</option>');
});
});
}
});
// 城市下拉框变化时,获取对应区县列表
$('#city').change(function() {
var cityId = $(this).val();
$('#district').empty().append('<option value="">请选择区县</option>');
if (cityId) {
$.get('/index.php/index/getDistricts?cityId=' + cityId, function(data) {
$.each(data, function(index, district) {
$('#district').append('<option value="' + district.id + '">' + district.name + '</option>');
});
});
}
});
});
```
这样,当用户选择省份时,我们就可以异步获取对应的城市列表,并将其填充到城市下拉框中;当用户选择城市时,我们就可以异步获取对应的区县列表,并将其填充到区县下拉框中。
阅读全文