Laravel编辑页中如何显示关联下拉框选中值并回显到输入框

控制器逻辑（editsub_category方法） #

先在控制器中获取编辑所需的子分类数据和关联的父分类列表，同时处理表单提交后的更新逻辑：

public function editsub_category(Request $request, $id)
{
    // 获取待编辑的子分类
    $subCategory = SubCategory::findOrFail($id);
    // 获取所有父分类用于下拉选项
    $parentCategories = Category::all();

    // 处理表单提交
    if ($request->isMethod('post')) {
        $validated = $request->validate([
            'parent_id' => 'required|exists:categories,id',
            'name' => 'required|string|max:255'
        ]);
        
        $subCategory->update($validated);
        return redirect()->back()->with('success', '子分类更新成功');
    }

    return view('subcategories.edit', compact('subCategory', 'parentCategories'));
}

视图层实现 #

在blade视图中，通过判断下拉框选中状态，将选中值显示到输入框，同时添加实时监听逻辑：

<!-- 关联父分类下拉框 -->
<div class="form-group">
    <label>选择父分类</label>
    <select name="parent_id" id="parentCategory" class="form-control">
        <option value="">请选择</option>
        @foreach($parentCategories as $category)
            <!-- 用三元表达式判断是否为当前选中的父分类 -->
            <option value="{{ $category->id }}" {{ $subCategory->parent_id == $category->id ? 'selected' : '' }}>
                {{ $category->name }}
            </option>
        @endforeach
    </select>
</div>

<!-- 显示选中值的输入框 -->
<div class="form-group">
    <label>选中的父分类</label>
    <!-- 初始化时判断子分类是否已关联父分类，有则显示名称，无则为空 -->
    <input type="text" id="selectedCategory" class="form-control" 
           value="{{ $subCategory->parentCategory ? $subCategory->parentCategory->name : '' }}" 
           readonly>
</div>

<!-- 实时更新输入框的JS -->
<script>
const selectBox = document.getElementById('parentCategory');
const inputBox = document.getElementById('selectedCategory');

selectBox.addEventListener('change', function() {
    // 判断下拉框是否选中有效选项
    if (this.value) {
        inputBox.value = this.options[this.selectedIndex].textContent;
    } else {
        inputBox.value = '';
    }
});
</script>

关键逻辑说明 #

1. 初始化显示：通过blade的三元表达式判断子分类是否已有关联的父分类，有则直接将父分类名称填充到输入框。
2. 实时更新：监听下拉框的change事件，判断选中的选项是否有有效值，有则将选项文本赋值给输入框，否则清空输入框。

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