Laravel表单联动下拉框咨询：自定义data-secid属性相关问题

没问题，我来帮你搞定这个依赖自定义data-secid属性的二级联动下拉框需求，结合你给出的Laravel代码片段，咱们一步步来实现：

首先把第一个下拉框的Blade代码补全，确保每个选项都正确输出data-secid属性：

<select name="region_id" class="form-control subsection" id="regions">
    @foreach($regions as $region)
        <option value="{{ $region->id }}" data-secid="{{ $region->secid }}">
            {{ $region->name }} <!-- 对应你例子里的madint nasr、semoha等名称 -->
        </option>
    @endforeach
</select>

<!-- 第二个依赖的子区域下拉框，初始禁用 -->
<select name="subregion_id" class="form-control" id="subregions" disabled>
    <option value="">请先选择区域</option>
</select>

这里提供两种实现方式，你可以根据项目技术栈选择：

方案A：jQuery实现（适合已引入jQuery的项目） #

$(document).ready(function() {
    // 监听区域下拉框的选择变化
    $('#regions').on('change', function() {
        // 获取选中选项的自定义data-secid值
        const secId = $(this).find('option:selected').data('secid');
        const subregionsSelect = $('#subregions');

        // 未选中有效选项时重置子区域下拉框
        if (!secId) {
            subregionsSelect.empty().append('<option value="">请先选择区域</option>').prop('disabled', true);
            return;
        }

        // 发起AJAX请求获取对应子区域数据
        $.ajax({
            url: '/get-subregions', // 替换为你的后端接口路由
            method: 'GET',
            data: { secid: secId },
            success: function(response) {
                // 更新子区域下拉框选项
                subregionsSelect.empty().prop('disabled', false);
                subregionsSelect.append('<option value="">请选择子区域</option>');
                $.each(response, function(key, subregion) {
                    subregionsSelect.append(`<option value="${subregion.id}">${subregion.name}</option>`);
                });
            },
            error: function() {
                subregionsSelect.empty().append('<option value="">加载失败，请重试</option>').prop('disabled', true);
            }
        });
    });

    // 可选：页面加载时自动触发一次，默认选中第一个区域的子区域
    $('#regions').trigger('change');
});

方案B：原生JavaScript实现（无需jQuery） #

document.addEventListener('DOMContentLoaded', function() {
    const regionsSelect = document.getElementById('regions');
    const subregionsSelect = document.getElementById('subregions');

    regionsSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const secId = selectedOption.dataset.secid;

        // 重置子区域下拉框逻辑
        if (!secId) {
            subregionsSelect.innerHTML = '<option value="">请先选择区域</option>';
            subregionsSelect.disabled = true;
            return;
        }

        // 用Fetch API请求后端数据
        fetch(`/get-subregions?secid=${secId}`, { method: 'GET' })
       .then(response => response.json())
       .then(data => {
            subregionsSelect.disabled = false;
            let options = '<option value="">请选择子区域</option>';
            data.forEach(subregion => {
                options += `<option value="${subregion.id}">${subregion.name}</option>`;
            });
            subregionsSelect.innerHTML = options;
        })
       .catch(() => {
            subregionsSelect.innerHTML = '<option value="">加载失败，请重试</option>';
            subregionsSelect.disabled = true;
        });
    });

    // 可选：页面加载时自动触发一次
    regionsSelect.dispatchEvent(new Event('change'));
});

步骤1：添加路由 #

在routes/web.php中添加接口路由：

use App\Http\Controllers\RegionController;

Route::get('/get-subregions', [RegionController::class, 'getSubregions']);

步骤2：控制器方法实现 #

在RegionController.php中编写获取子区域的方法：

use App\Models\Subregion; // 替换为你的子区域模型类
use Illuminate\Http\Request;

public function getSubregions(Request $request)
{
    // 验证传入的secid参数合法性
    $request->validate([
        'secid' => 'required|integer'
    ]);

    // 根据secid查询对应子区域，这里的查询条件要匹配你的数据库表结构
    $subregions = Subregion::where('secid', $request->secid)->get(['id', 'name']);

    // 返回JSON格式的子区域数据
    return response()->json($subregions);
}

• 确保data-secid属性绑定的是正确的字段值：Blade代码里的$region->secid要和你的Region模型中存储该自定义ID的字段名一致
• 后端查询要匹配数据库结构：如果你的子区域表关联字段不是secid，要修改where条件中的字段名
• 如果需要默认选中逻辑：可以保留代码中注释的自动触发change事件的代码，页面加载时就会渲染第一个区域的子选项

内容的提问来源于stack exchange，提问作者Em Fortrade