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

Question

Good morning everybody, I'm stuck while trying to set initial selected options (got through an ajax requests) to a jquery select2 (multi-select). If I use the control, multi selection works just fine. The problem arise when I have to edit a previously saved model, as none of the options I previously selected are shown.

This is my view:

<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> 

The 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."
});

The Controller:

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)) ]); 
}

Model:

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 "";
}

Could you shed some light on this? Thank you in advance.

Answer 1

You can create an ajax call on J-query Event and Bind the data through id.

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

Maybe it helps you.....

Answer 2

If I understand your end-goal correctly, you want to update the Select2 multi-select by selecting options after the Select2 has been initialized using data received from an Ajax request.

If that's the case, you're looking for the .trigger('change') event.

I personally use VueJS and hand-crafted forms, but this should point you in the right direction:

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

The selected_values_array is a JS array that contains the values: <option value="1"></option> that you want selected. The .trigger() then updates the Select2 to show them.

Hope that helps!

Answer 3

When you make a dropdown selector you can specify the initially selected options:

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

However this means you need to pre-populate your AJAX select2 dropdown with the initially selected options.