基于Laravel Livewire实现下拉选择框联动自动填充输入框

嘿，这个联动需求在Livewire里实现起来很顺畅，我给你梳理下具体步骤：

第一步：在Livewire组件中添加联动逻辑 #

我们可以利用Livewire的生命周期钩子，当课程描述（corsdes）的选中值变化时，自动匹配对应的课程编号（corsno）。在你的组件类里补充以下代码：

public $corsdes;
public $corsno;
public $subjects;

public function mount()
{
    // 初始化加载课程数据，和你原来的逻辑一致
    $this->subjects = DB::table('programs_subj')->select('corsdes', 'corsno')->get();
}

// 当corsdes属性更新时自动触发这个方法
public function updatedCorsdes($selectedCorsdes)
{
    // 从已加载的课程集合中找到对应的课程编号
    $matchedSubject = $this->subjects->firstWhere('corsdes', $selectedCorsdes);
    
    // 如果找到匹配项就填充corsno，没有匹配项则清空输入框
    $this->corsno = $matchedSubject ? $matchedSubject->corsno : '';
}

第二步：调整前端视图代码 #

你的下拉框有个小细节需要修正：第一个选项的value设置不合理，而且wire:model不需要加到<option>标签上。另外建议把课程编号输入框设为只读（避免用户手动修改，如果你需要允许修改可以去掉这个属性）。修改后的视图代码如下：

<select name="corsdes" id="corsdes" wire:model="corsdes">
    <option value="">请选择课程描述</option>
    @foreach($subjects as $sbj)
        <option value="{{ $sbj->corsdes }}">{{ $sbj->corsdes}}</option>
    @endforeach
</select>
<input type="text" name="corsno" id="corsno" wire:model="corsno" readonly>

逻辑说明 #

当你选择下拉框里的某个课程描述时，Livewire会自动同步组件的corsdes属性，同时触发updatedCorsdes方法。这个方法会从提前加载的subjects集合里找到对应的课程编号，赋值给corsno属性，而输入框因为绑定了wire:model="corsno"，会实时更新显示这个值。

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