laravel jquery select2 multiselect - 初始化选定的元素

Posted 2023-05-07

【中文标题】laravel jquery select2 multiselect - 初始化选定的元素

【英文标题】：laravel jquery select2 multiselect - initialize selected elements

【发布时间】：2017-11-07 03:03:38

【问题描述】：

大家早上好，我在尝试将初始选定选项（通过 ajax 请求）设置为 jquery select2（多选）时遇到了困难。如果我使用控件，多选就可以了。当我必须编辑以前保存的模型时会出现问题，因为我之前选择的选项都没有显示。

这是我的看法：

<div class="form-group  $errors->has('pubblicazione_giuridica_id') ? 'has-error' : ''"> 
    !! Form::label('pubblicazione_giuridica_id', 'Law Pubs', ['class' => 'col-sm-3 control-label']) !! 
    <div class="col-sm-6"> 
        !! Form::select('pubblicazione_giuridica_id[]', [$pubGiurList], null, ['class' => 'form-control', 'id'=>'select-pgiur', 'multiple'=>'multiple']) !! 
        !! $errors->first('pubblicazione_giuridica_id', '<p class="help-block">:message</p>') !! 
    </div> 

javascript：

$('#select-pgiur').select2( 
    ajax:  
        url: "!! URL::to('/gare/proc-getpubgiur') !!", 
        dataType: 'json', 
        delay: 150, 
        data: function (params)  
            return  q: params.term, ;
        , 
        processResults: function (data, params) 
            return  results: data.items, ; 
        , 
        cache: true 
    , 
    language: 'it', 
    theme: "bootstrap", 
    placeholder: "Choose an option."
);

控制器：

public function edit($id, Request $request)  
    $procedure = $this->getProcedure($id, $request, true); 
    if (!$procedure)  
        return redirect('gare/procedure')->with('alert-warning', 'Gara non trovata - Operazione non consentita'); 
     
    return view('gare.procedures.edit', [ 'procedure'=>$procedure, 'opChoiceList'=>$this->getOpChoiceList(), 'pubGiurList'=>json_encode(GaraPubblicazioneGiuridica::GetPubByGaraId($procedure->id)) ]); 

型号：

public static function GetPubByGaraId($id)
    //TODO: visualizzare le selected publications
    $procagg = GaraPubblicazioneGiuridica::where('gara_id','=',$id)->select('id')->get();
    if($procagg)
        $plucked = $procagg->pluck('nome');
        $toReturn = array();
        foreach($plucked as $key=>$value)
            $toReturn[$key]=$value;
        
        return $toReturn;
    
    return "";

你能解释一下吗？ 提前谢谢你。

【参考方案1】：

如果我正确理解您的最终目标，您希望通过选择选项来更新 Select2 多选 Select2 已使用从 Ajax 请求接收的数据进行初始化。

如果是这种情况，您正在寻找.trigger('change') 事件。

我个人使用 VueJS 和手工制作的表单，但这应该为您指明正确的方向：

$("#your_select2_id").val(selected_values_array).trigger("change");

selected_values_array 是一个 JS 数组，其中包含您要选择的值：<option value="1"></option>。 .trigger() 然后更新 Select2 以显示它们。

希望有帮助！

【参考方案2】：

当您制作下拉选择器时，您可以指定最初选择的选项：

Form::select(
   'pubblicazione_giuridica_id[]',
   [$pubGiurList],  
   $opChoiceList, 
  ['class' => 'form-control', 'id'=>'select-pgiur', 'multiple'=>'multiple']
)

但是，这意味着您需要使用最初选择的选项预先填充 AJAX select2 下拉列表。

【参考方案3】：

您可以在J-query Event上创建ajax调用并通过id绑定数据。

$("#select-pgiur").val(data.items).trigger("change");

也许对你有帮助.....