PHP中实现选择下拉选项后展示关联下拉框的方法

要实现选择第一个下拉后动态展示关联的第二个下拉，核心是通过前端监听选择事件 + 后端接口返回关联数据来完成，具体步骤如下：

1. 前端页面调整 #

在原有HTML代码下方，添加第二个下拉的容器（初始隐藏）：

<!-- 第一个下拉（保留原代码） -->
<select id="idjenisuniform" name="idjenisuniform" style="width: 100%;">
   <option value=""></option>
   @foreach($idjenisuniform as $g)
      <option value="{{$g->id}}">{{$g->badanuniform}}</option>
   @endforeach
</select>

<!-- 第二个关联下拉（初始隐藏） -->
<div id="subUniformContainer" style="display: none; margin-top: 10px;">
    <label>分组选项</label>
    <select id="subUniform" name="subUniform" style="width: 100%;">
        <option value="">请选择</option>
    </select>
</div>

2. 前端JS逻辑（监听选择并请求数据） #

用原生JS实现，无需额外依赖：

const mainSelect = document.getElementById('idjenisuniform');
const subContainer = document.getElementById('subUniformContainer');
const subSelect = document.getElementById('subUniform');

// 监听第一个下拉的选择变化
mainSelect.addEventListener('change', function() {
    const selectedId = this.value;
    
    // 未选择值时，隐藏第二个下拉并清空选项
    if (!selectedId) {
        subContainer.style.display = 'none';
        subSelect.innerHTML = '<option value="">请选择</option>';
        return;
    }

    // 发送请求获取关联数据
    fetch(`/get-sub-uniforms/${selectedId}`)
        .then(response => response.json())
        .then(data => {
            // 清空原有选项
            subSelect.innerHTML = '<option value="">请选择</option>';
            // 遍历数据生成新选项
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.id;
                option.textContent = item.name; // 替换为你实际的分组名称字段
                subSelect.appendChild(option);
            });
            // 显示第二个下拉容器
            subContainer.style.display = 'block';
        })
        .catch(error => {
            console.error('获取数据失败:', error);
        });
});

3. 后端Laravel配置 #

路由（routes/web.php） #

添加处理请求的GET路由：

Route::get('/get-sub-uniforms/{id}', [UniformController::class, 'getSubUniforms']);

控制器方法（以UniformController为例） #

编写方法查询关联数据并返回JSON：

public function getSubUniforms($id)
{
    // 替换为你的实际关联查询逻辑，比如从对应模型中筛选主uniform的子分组
    $subUniforms = \App\Models\SubUniform::where('idjenisuniform', $id)->get(['id', 'name']);
    
    return response()->json($subUniforms);
}

注意事项 #

• 替换代码中的模型名、字段名（如SubUniform、name、idjenisuniform）为你数据库中的实际名称
• 若习惯用jQuery，可将fetch替换为$.get，写法更简洁
• 可根据需求添加加载状态提示（比如请求时显示“加载中”）

内容的提问来源于stack exchange，提问作者Arif Asyraf