select2 change les éléments de façon dynamique

Question

J'ai deux sélections qui sont liées : Chaque valeur de la première sélection détermine les éléments qui seront affichés dans la deuxième sélection.

Les valeurs de la deuxième sélection sont stockées dans un tableau à deux dimensions :

[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...],
  [{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...],
  ...
]

La valeur de la première sélection détermine l'indice à utiliser pour remplir la deuxième sélection. Ainsi, dans un événement de modification de la première sélection, je devrais être en mesure de modifier les éléments que contient la deuxième sélection.

En lisant la documentation, je pense que je dois utiliser l'option "data"... mais je ne sais pas trop comment car l'exemple charge les données du tableau à l'initialisation et il semble que cela ne fonctionne pas si j'essaie de faire la même chose après l'initialisation.

HTML

Attribute:
<select name="attribute" id="attribute">
    <option value="0">Color</option>
    <option value="1">Size</option>
</select>

Value:
<select name="value" id="value"></select>

<script>
   var data = [ [{"id":1,"text":"black"}, {"id":2,"text":"blue"},...],
                [{"id":"1","text":"9"},{"id":"1","text":"10"},...],
              ];
   $('#attribute').select2().bind('change', function(){
      // Here I need to change `#value` items.
      $('#value').select2('data',data[$(this).val()]);  // This does not work
   );

   $('#value').select2();
</script>

Answer 1

J'ai fait un exemple pour vous montrer comment cela pourrait être fait.

Remarquez le js mais aussi que j'ai changé #value en élément d'entrée

<input id="value" type="hidden" style="width:300px"/>

et que je déclenche le change événement pour obtenir les valeurs initiales

$('#attribute').select2().on('change', function() {
    $('#value').select2({data:data[$(this).val()]});
}).trigger('change');

Exemple de code

Editar:

Dans la version actuelle de select2, l'attribut class est transféré de l'entrée cachée dans l'élément Root créé par select2, même l'élément select2-offscreen qui positionne l'élément bien au-delà des limites de la page.

Pour résoudre ce problème, il suffit d'ajouter removeClass('select2-offscreen') avant d'appliquer select2 une seconde fois sur le même élément.

$('#attribute').select2().on('change', function() {
    $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()]});
}).trigger('change');

J'ai ajouté un nouveau Exemple de code pour aborder cette question.

Answer 2

J'utilise avec succès ce qui suit pour mettre à jour les options de façon dynamique :

$control.select2('destroy').empty().select2({data: [{id: 1, text: 'new text'}]});

Answer 3

Essayez d'utiliser la propriété trigger pour cela :

$('select').select2().trigger('change');

Answer 4

Je répare le manque de bibliothèque d'exemples ici :

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js">

http://jsfiddle.net/bbAU9/328/

Answer 5

Pour la v4, il s'agit d'un problème connu qui ne sera pas résolu dans la 4.0, mais il existe une solution de contournement. Consultez https://github.com/select2/select2/issues/2830