如何在Laravel中实现选中特定选项时显示第二个下拉选择框？

当然可以实现，这个需求核心是用JavaScript控制DOM元素的显示/隐藏，Laravel只负责渲染初始的下拉框选项内容即可。以下是修改后的实现方案：

第一步：调整HTML结构 #

给第一个下拉框添加id方便JS获取，给第二个下拉框默认加上隐藏类（这里用Bootstrap的d-none，和你用的form-select风格匹配），同时保留Laravel的old()回显逻辑：

<select id="categorySelect" class="form-select my-2" name="category_id">
    <option disabled selected>Seleziona una categoria</option>
    @foreach ($categories as $category)
        <option value="{{ $category->id }}" @if ($category->id == old('category_id')) selected @endif>
            {{ $category->name }}
        </option>
    @endforeach
</select>

<!-- 默认隐藏第二个下拉框 -->
<select id="typeSelect" class="form-select my-2 d-none" name="type_id">
    <option disabled selected>Seleziona un tipo di sushi</option>
    @foreach ($types as $type)
        <option value="{{ $type->id }}" @if ($type->id == old('type_id')) selected @endif>
            {{ $type->name }}
        </option>
    @endforeach
</select>

第二步：添加JavaScript逻辑 #

监听第一个下拉框的change事件，判断选中的值是否是你指定的特定选项（比如假设特定选项的id是1，你可以根据实际情况修改），同时处理表单提交后回显的情况（页面加载时自动判断一次）：

// 获取两个下拉框元素
const categorySelect = document.getElementById('categorySelect');
const typeSelect = document.getElementById('typeSelect');

// 定义需要触发显示的特定选项值
const targetCategoryId = '1'; // 替换成你实际的特定选项ID

// 控制显示/隐藏的函数
function toggleTypeSelect() {
    if (categorySelect.value === targetCategoryId) {
        typeSelect.classList.remove('d-none');
    } else {
        typeSelect.classList.add('d-none');
        // 隐藏时重置第二个下拉框的选中状态（可选）
        typeSelect.selectedIndex = 0;
    }
}

// 页面加载时执行一次，处理old()回显的情况
document.addEventListener('DOMContentLoaded', toggleTypeSelect);

// 监听下拉框变化事件
categorySelect.addEventListener('change', toggleTypeSelect);

补充说明 #

• 如果你不用Bootstrap，把d-none换成自定义的CSS类即可，比如：

  .hidden { display: none; }
  

• 把targetCategoryId替换成你实际需要触发显示的那个分类ID即可。

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