Laravel Livewire多选下拉框实现一键多选问题求助

问题背景 #

使用Laravel Livewire构建表单，给<select>标签添加了multiple属性，但默认需要按住Command（Mac）/Ctrl（Windows）键才能多选，希望实现点击即可切换选中状态。尝试给<option>添加wire:click绑定方法累加数组，但每次点击仅保留最后选中的值，无法正常累加。

原代码：

Blade模板 #

@php
  $items = ['bag','hat','mug','stickers'];
@endphp
<select wire:model="extra" multiple > 
  <option disabled value="select" >Select</option> 
  @foreach ($items as $item)
    <option value="{{$item}}" wire:click="buildArr('{{$item}}')">{{$item}}</option> 
  @endforeach
</select>

Livewire组件 #

public $extra = [''];

public function buildArr($item){
  $this->extra[]= $item;
}

问题原因 #

原生<select multiple>的默认行为是：点击单个选项会替换当前选中集合，同时wire:model会自动同步这个选中值到$extra，导致自定义的buildArr方法添加的元素被覆盖，最终只保留最后点击的选项。

解决方案：使用AlpineJS实现一键多选 #

借助AlpineJS修改<select>的默认选中行为，同时通过@entangle同步状态到Livewire组件，无需按住按键即可点击切换选中状态。

步骤1：修改Livewire组件变量初始化 #

将$extra初始化为空数组，避免初始值干扰：

public $extra = [];

步骤2：更新Blade模板 #

用AlpineJS管理选中状态，绑定点击事件切换选项的选中状态，并通过@entangle同步到Livewire的$extra：

@php
  $items = ['bag','hat','mug','stickers'];
@endphp
<div x-data="{ selected: @entangle('extra') }">
  <select multiple>
    <option disabled value="select">Select</option>
    @foreach ($items as $item)
      <option 
        value="{{ $item }}"
        x-bind:selected="selected.includes('{{ $item }}')"
        x-on:click="
          const item = '{{ $item }}';
          if (selected.includes(item)) {
            selected = selected.filter(i => i !== item);
          } else {
            selected.push(item);
          }
        "
      >{{ $item }}</option>
    @endforeach
  </select>
</div>

原理说明 #

• @entangle('extra')：将Alpine的selected数组与Livewire的$extra双向绑定，两者状态实时同步。
• x-bind:selected：根据selected数组判断当前选项是否应该被选中。
• x-on:click：点击选项时，切换其在selected数组中的存在状态（存在则移除，不存在则添加），从而实现点击切换选中的效果。

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