web-dev-qa-db-fra.com

Select2 Valeurs par défaut pour plusieurs tags de sélection et autorisés

J'ai un select 2 multi-select option 

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

Je souhaite définir des valeurs par défaut au cas où l'utilisateur modifierait le formulaire. 

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

Mais le problème est que j'autorise les options générées par l'utilisateur à l'aide de l'option tags: true pour select2.

Lorsque je définis une valeur par défaut qui était initialement dans les options html, cela fonctionne, mais lorsque je définis un paramètre par défaut généré par l'utilisateur, cela ne fonctionne pas.

C'est la première fois que j'utilise select2. 

Comment puis-je atteindre cet objectif?

javascriptjqueryhtmlselect2
7
Raymond Ativie

En creusant un peu, je peux voir que cette question a été soulevée sur GitHub .

Une option consiste à vérifier si la valeur existe et à append si ce n'est pas le cas.

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>

10
BenG

J'ai récemment eu à implémenter un select2 avec les options 'multiple' et 'tags' dans un script PHP, et j'ai rencontré un problème similaire. La documentation indiquait d'ajouter les sélections initiales sous forme de balises d'option html, mais lorsque j'ai essayé d'en ajouter deux, une seule apparaît dans le contrôle select2.

J'ai fini par initialiser le contrôle select2 avec l'option 'data' de l'objet de configuration, que je créerais de manière dynamique.

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>

0
Tim