Laravel Blade视图中实现区域-区县下拉框联动的方法问询

你当前的思路存在核心误区：PHP是服务器端运行代码，页面渲染完成后就结束执行；而JavaScript是浏览器端运行代码，两者运行环境完全分离，无法直接把JS获取的选中值传给PHP重新执行数据库查询。要实现联动效果，必须通过**前端异步请求（AJAX）**配合后端接口来动态获取区县数据。

以下是具体实现步骤：

1. 调整Blade视图结构 #

将区县选择框设置为初始空状态，后续通过JS动态填充选项：

<!-- 区域选择框 -->
<select name="region" id="region" onchange="selectRegion()">
   @foreach ( $regions as $region)  
     <option value="{{ $region->region_id }}">{{ $region->region_name }}</option>       
   @endforeach
</select> 

<!-- 区县选择框（初始提示状态） -->
<label>Districts</label>
<select name="district" id="district">
    <option value="">请先选择区域</option>
</select>

2. 创建后端接口 #

编写用于根据区域ID返回对应区县数据的接口：

2.1 添加路由（routes/web.php） #

use App\Http\Controllers\DistrictController;

Route::get('/api/districts/{regionId}', [DistrictController::class, 'getByRegion']);

2.2 编写控制器方法（app/Http/Controllers/DistrictController.php） #

<?php

namespace App\Http\Controllers;

use App\Models\District;

class DistrictController extends Controller
{
    public function getByRegion($regionId)
    {
        // 根据区域ID查询对应区县
        $districts = District::where('region_id', $regionId)->get();
        // 返回JSON格式数据给前端
        return response()->json($districts);
    }
}

3. 编写前端AJAX逻辑 #

修改selectRegion函数，通过异步请求获取区县数据并动态渲染选项：

原生JavaScript版本 #

function selectRegion() {
    const regionId = document.getElementById("region").value;
    const districtSelect = document.getElementById("district");

    // 清空现有选项，显示加载状态
    districtSelect.innerHTML = '<option value="">加载中...</option>';

    // 未选择区域时重置提示
    if (!regionId) {
        districtSelect.innerHTML = '<option value="">请先选择区域</option>';
        return;
    }

    // 发送异步请求到后端接口
    fetch(`/api/districts/${regionId}`)
        .then(response => {
            if (!response.ok) throw new Error('请求失败');
            return response.json();
        })
        .then(data => {
            // 构建区县选项列表
            let options = '<option value="">请选择区县</option>';
            data.forEach(district => {
                options += `<option value="${district.district_id}">${district.district_name}</option>`;
            });
            districtSelect.innerHTML = options;
        })
        .catch(error => {
            console.error('获取区县数据出错:', error);
            districtSelect.innerHTML = '<option value="">加载失败，请重试</option>';
        });
}

jQuery版本（项目已引入jQuery时可用） #

function selectRegion() {
    const regionId = $("#region").val();
    const districtSelect = $("#district");

    districtSelect.html('<option value="">加载中...</option>');

    if (!regionId) {
        districtSelect.html('<option value="">请先选择区域</option>');
        return;
    }

    $.get(`/api/districts/${regionId}`, function(data) {
        let options = '<option value="">请选择区县</option>';
        $.each(data, function(index, district) {
            options += `<option value="${district.district_id}">${district.district_name}</option>`;
        });
        districtSelect.html(options);
    }).fail(function() {
        districtSelect.html('<option value="">加载失败，请重试</option>');
    });
}

4. 可选：初始加载默认区县 #

如果页面加载时需要默认选中某个区域并显示对应区县，可在Blade中添加初始化逻辑：

<!-- 区域选择框添加默认选中属性 -->
<select name="region" id="region" onchange="selectRegion()">
   @foreach ( $regions as $region)  
     <option value="{{ $region->region_id }}" {{ $defaultRegionId == $region->region_id ? 'selected' : '' }}>{{ $region->region_name }}</option>       
   @endforeach
</select> 

<script>
// 页面加载完成后，自动触发已有选中区域的区县查询
document.addEventListener('DOMContentLoaded', function() {
    const regionSelect = document.getElementById('region');
    if (regionSelect.value) {
        selectRegion();
    }
});
</script>

内容的提问来源于stack exchange，提问作者Gabriel Rogath