Laravel项目：如何在JQuery Multiselect中显示数据库已有选中值

嘿，我明白你遇到的问题了——在使用双向多选组件时，想把数据库里之前保存的选中项预先显示在右侧的#multiselect_to选择框里，并且让组件正确识别这些选中状态对吧？下面我分步骤给你讲怎么搞定：

第一步：从后端把已选中的ID传到视图 #

在你的Laravel控制器（比如PlayerController的edit方法）里，先从数据库取出已保存的选中项ID数组，同时把所有可选的项也获取到，一起传给视图：

// 根据你的实际模型关联调整，比如假设Player模型关联了selectedItems
$player = Player::find($id);
// 提取已选中项的ID，转成数组
$selectedIds = $player->selectedItems->pluck('id')->toArray();
// 获取所有可选的项，比如从Item模型查询
$allItems = Item::all();

return view('player.edit', compact('player', 'selectedIds', 'allItems'));

第二步：在Blade视图里渲染预选中的选项 #

别再硬编码选项啦，从数据库动态渲染更灵活。我们把未选中的项放在左侧选择框，已选中的项放在右侧并标记selected：

<form action="{{ action('Player@update', $player->id) }}" method="post" class="form-horizontal"> 
    {{ csrf_field() }}
    {{ method_field('PUT') }} <!-- 编辑页面必须加这个，Laravel需要PUT/PATCH来处理更新请求 -->
    <div class="row"> 
        <div class="col-xs-5"> 
            <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
                <!-- 左侧显示未被选中的项 -->
                @foreach($allItems as $item)
                    @if(!in_array($item->id, $selectedIds))
                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                    @endif
                @endforeach
            </select> 
        </div> 
        <div class="col-xs-2"> 
            <button type="button" id="multiselect_rightAll" class="btn btn-block"> 
                <i class="fa fa-angle-double-right" aria-hidden="true"></i> 
            </button> 
            <button type="button" id="multiselect_rightSelected" class="btn btn-block"> 
                <i class="fa fa-angle-right" aria-hidden="true"></i></button> 
            <button type="button" id="multiselect_leftSelected" class="btn btn-block"> 
                <i class="fa fa-angle-left" aria-hidden="true"></i> 
            </button> 
            <button type="button" id="multiselect_leftAll" class="btn btn-block"> 
                <i class="fa fa-angle-double-left" aria-hidden="true"></i> 
            </button> 
        </div> 
        <div class="col-xs-5"> 
            <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple">
                <!-- 右侧预加载已选中的项，标记为selected -->
                @foreach($allItems as $item)
                    @if(in_array($item->id, $selectedIds))
                        <option value="{{ $item->id }}" selected>{{ $item->name }}</option>
                    @endif
                @endforeach
            </select> 
        </div> 
    </div> 

    <button type="submit" class="btn btn-success">@lang('main.save')</button> 
</form>

第三步：初始化Multiselect组件并同步选中状态 #

接下来要确保JS初始化时，组件能识别预选中的项，同时双向选择按钮操作后要刷新组件状态：

jQuery(document).ready(function($) {
    // 初始化左右两个多选组件
    $('#multiselect').multiselect();
    $('#multiselect_to').multiselect();

    // 手动设置右侧组件的选中状态（适配多数Multiselect版本）
    $('#multiselect_to').multiselect('select', {!! json_encode($selectedIds) !!});

    // 右侧选择按钮逻辑：移动选项后刷新组件
    $('#multiselect_rightSelected').click(function() {
        var selectedItems = $('#multiselect option:selected').clone();
        $('#multiselect_to').append(selectedItems);
        $('#multiselect option:selected').remove();
        // 刷新组件让状态生效
        $('#multiselect').multiselect('refresh');
        $('#multiselect_to').multiselect('refresh');
    });

    // 左侧选择按钮逻辑同理
    $('#multiselect_leftSelected').click(function() {
        var selectedItems = $('#multiselect_to option:selected').clone();
        $('#multiselect').append(selectedItems);
        $('#multiselect_to option:selected').remove();
        $('#multiselect').multiselect('refresh');
        $('#multiselect_to').multiselect('refresh');
    });

    // 全选/全移按钮可以照着上面的逻辑补全，这里就不重复啦
});

几个关键注意点 #

• 一定要保证$selectedIds里的ID和选项的value完全匹配，不然组件识别不出选中状态
• 不同版本的jQuery Multiselect设置选中状态的API可能有差异，比如有些版本支持初始化时传入selectedValues参数，你可以对照自己用的组件文档调整
• 新增页面不需要预加载逻辑，只有编辑页面需要上面的步骤
• 编辑表单必须加{{ method_field('PUT') }}，否则Laravel会把请求当成新增操作

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