Select2 I valori di default per più selezionati e ammessi tag

Question

ho una select 2 opzione di selezione multipla

<select multiple name="event_type[]" class="form-control" id="selectEvents"> 
    @foreach ($eTypes as $type) 
     <option>{{$type}}</option> 
    @endforeach 
</select> 

voglio impostare alcuni valori di default nel caso in cui l'utente sta modificando la forma. ho fatto con successo che, così facendo

var s2 = $("#selectEvents").select2({ 
    placeholder: "Choose event type", 
    tags: true 
}); 

s2.val(["Trade Fair", "CA", "Party"]).trigger("change"); //CA doesn't show as a default 

Ma il problema è che io sto permettendo opzioni utente generato utilizzando l'opzione tags: true per select2.

Quando imposto un valore predefinito inizialmente nelle opzioni html, esso funziona, ma quando imposto un valore predefinito generato dall'utente non funziona.

È la prima volta che utilizzo select2.

Come posso ottenere questo?

Answer 1

Facendo un po 'di scavo, posso vedere questo problema sollevato su GitHub.

Un'opzione consiste nel verificare se il valore esiste e nello stato append in caso contrario.

var s2 = $("#selectEvents").select2({ 
 
    placeholder: "Choose event type", 
 
    tags: true 
 
}); 
 

 
var vals = ["Trade Fair", "CA", "Party"]; 
 

 
vals.forEach(function(e){ 
 
if(!s2.find('option:contains(' + e + ')').length) 
 
    s2.append($('<option>').text(e)); 
 
}); 
 

 
s2.val(vals).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/> 
 

 
<select multiple name="event_type[]" class="form-control" id="selectEvents"> 
 
    <option>Trade Fair</option> 
 
    <option>Party</option> 
 
    <option>Foo</option> 
 
    <option>Bar</option> 
 
</select>

Answer 2

Recentemente ho dovuto implementare un select2 con le opzioni 'multiple' e 'tag' in uno script PHP, e ha incontrato un problema simile. La documentazione diceva di aggiungere qualsiasi selezione iniziale come tag di opzione html, ma quando ho provato ad aggiungerne due, solo una si sarebbe mostrata nel mio controllo select2.

Ho finito per inizializzare il controllo select2 con l'opzione "data" dell'oggetto di configurazione, che avrei creato dinamicamente.

var initialPropertyOptions = []; 
 
@foreach ($model->properties as $initialProperty`) 
 
    var initialPropertyOption = { 
 
     id:   {{ $initialProperty->id }}, 
 
     text:  '{{ $initialProperty->name }}', 
 
     selected: true 
 
    } 
 
    initialPropertyOptions.push(initialPropertyOption); 
 
@endforeach 
 

 
$('#properties').select2({ 
 
    ajax: { 
 
     url:  route('models.propertySearch'), 
 
     dataType: 'json', 
 
     delay:  250, 
 
     processResults: function(data) { 
 
      return { 
 
       results: data 
 
      } 
 
     } 
 
    }, 
 
    placeholder:  'Enter property name', 
 
    minimumInputLength: 1, 
 
    multiple:   true, 
 
    tags:    true, 
 
    data:    initialPropertyOptions 
 
});

<div> 
 
    <label for="properties">Properties</label> 
 
    <select name="properties[]" id="properties"> 
 
    </select> 
 
</div>