web-dev-qa-db-fra.com

select2: sélection par défaut en sélection multiple avec AJAX

J'utilise le génial select2 pour créer un combo à sélection multiple.

Je voudrais par programme sélectionner les valeurs par défaut (comme dans les sélections que l'utilisateur a déjà faites), mais je ne sais pas comment. J'ai lu qu'initSelection était efficace, mais on l'appelle lors de la création du combo et je ne veux pas que cette sélection par défaut soit toujours effectuée.

jqueryjquery-select2
20
Gabriel Sanmartin

bonne solution dans la version 4.x par exemple:

$('#element').val(['val1','val2']).trigger('change');

voir: Description du créateur

14
Ramin Firooz

J'ai trouvé des solutions, cela vous aidera peut-être:

$('#el').select2({...}) // init select2

var defaultData = [{id:1, text:'Item1'},{id:2,text:'Item2'},{id:3,text:'Item3'}];

$('#el').data().select2.updateSelection(defaultData);
5
sanj

Comme indiqué dans la documentation ici , vous pouvez simplement ajouter des "options" à votre balise sélectionnée afin de présélectionner les valeurs par défaut initiales.

<select class="js-data-example-ajax">
  <option value="3620194" selected="selected">select2/select2</option>
</select>
3
Thomas Clowes

Depuis la page de documentation:

" val - Obtient ou définit la sélection. Si le paramètre value n'est pas spécifié, l'attribut id de l'élément actuellement sélectionné est renvoyé. Si le paramètre value est spécifié, il devient la sélection actuelle."

Aussi, à partir de la documentation:

$("#e8").select2("val", "CA");
3
user504674

J'ai parcouru un tableau de valeurs, puis définissez chaque option correspondant à ("selected", true)

values = [2, 5, 3]

for val in values
  $("#selects_id option[value="+val+"]").prop("selected",true).trigger("change")

Vous pouvez également utiliser les résultats d'un appel Ajax.

1
longJOURNEY

Je l'ai compris finalement !! Select2 itère à travers la balise <option> sous le <select>. 

<select class="js-data-example-ajax" style="width:100%">
  <option value="3620194" selected="selected">Put the pre-selected options here</option>
</select>

Le code HTML interne du <option> est placé dans l'objet repo sous la clé de texte. Donc repo.text donnera le innerhtml. Autrement dit, tout ce que nous avons à faire est de fournir repo.text à l’option formatSelection dans init. De plus, le json transmis par le servlet (contrôleur) doit avoir le texte d'étiquette souhaité placé sous la clé text! Je cherche toujours comment ajouter des attributs aux éléments li créés pour pouvoir sauvegarder la liste modifiée. Des idées?

0
Ab Sin

Le code suivant fonctionne bien, mais le select2 doit être actualisé.

$('#el').data().select2.updateSelection(defaultData);
0
Fayez Barbari

Pour prolonger @sanj, réponse ..__ Cela semble fonctionner pour moi dans mes projets.

Via HTML

HTML

<select class="select2" style='width:100%;' multiple>
    <option val=''>Please choose</option>
    <option val="1" selected>One</option>
    <option val="2" selected>Two</option>
    <option val="3">Three</option>
</select>

JS

$('.select2').select2();

Résultats  enter image description here

Via Javascript

HTML

<select class="select2" style='width:100%;' multiple>
    <option val=''>Please choose</option>
    <option val="1">One</option>
    <option val="2">Two</option>
    <option val="3">Three</option>
</select>

JS

$('.select2').select2();
var defaultData = [{id:1, text:'One'},{id:2,text:'Two'}];
$('.select2').data().select2.updateSelection(defaultData);

Résultats  enter image description here

0
Louwki