如何在Laravel8中使用Select2 jQuery展示已选中的多下拉框值

要让Select2多选框默认展示已选中的分销商，有两种可行方式，以下是具体实现：

方案一：后端渲染时直接标记选中状态 #

1. 优化控制器代码，提取选中的分销商ID数组 #

修改控制器，将查询到的已选分销商数据提取为仅包含ds_id的数组，方便视图判断：

public function addDistributor(){
    $dealer_id='DL-1';
    $data['all_dist'] = DB::select("CALL fetchDistributorDetails()"); // 注意：原代码调用的fetchDealerDetails是笔误，需与存储过程名fetchDistributorDetails一致
    $selected_distributors = DB::select("CALL specificIdDelaerDistributor('".$dealer_id."')");
    // 提取所有已选的分销商ID到数组
    $data['selected_ds_ids'] = array_column($selected_distributors, 'ds_id');
    return view('distributor.create',$data);
}

2. 修改视图，添加选中判断 #

在循环生成<option>标签时，判断当前分销商ID是否在已选数组中，若存在则添加selected属性：

<div class="col-md-6">
    <label>Multiple Select2</label>
    <select id="multiple" class="js-states form-control" multiple>
        @foreach ($all_dist as $item)
            <option value="{{$item->ds_id}}" {{ in_array($item->ds_id, $selected_ds_ids) ? 'selected' : '' }}>{{$item->name}}</option>   
        @endforeach
    </select>
</div>

3. 保持原有脚本不变 #

Select2会自动识别带有selected属性的选项，无需修改原初始化脚本。

方案二：通过JS初始化选中状态 #

如果不想修改后端逻辑，也可以通过JS动态设置选中值：

1. 视图中处理选中ID数组 #

如果控制器未修改，可在视图内直接处理已选数据：

@php
    $selected_ds_ids = array_column($selected_dealer_distributor, 'ds_id');
@endphp

2. 修改初始化脚本，设置选中值 #

在Select2初始化后，调用val()方法设置选中数组，并触发change事件更新UI：

<script>
    // 将后端的选中ID数组转为JS数组
    const selectedDistIds = {!! json_encode($selected_ds_ids) !!};

    $("#multiple").select2({
        placeholder: "Select Distributor",
        allowClear: true
    }).val(selectedDistIds).trigger('change');
</script>

注意事项 #

• 修正存储过程调用名称：原控制器中fetchDealerDetails与存储过程名fetchDistributorDetails不一致，必须修正为正确名称，否则无法获取所有分销商列表。
• 确保ds_id格式前后统一：避免因字符串大小写、特殊字符等格式问题导致选中判断失效。

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