web-dev-qa-db-fra.com

select2 changer d'éléments dynamiquement

J'ai deux sélections 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 première valeur de sélection détermine l'index à utiliser pour renseigner la deuxième sélection. Ainsi, lors d'un événement de "changement" le premier, je devrais pouvoir modifier les éléments que contient deux éléments.

En lisant la documentation, je pense que j’ai besoin d’utiliser l’option "data" ... mais je ne vois pas comment, car l’exemple charge les données du tableau lors de 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>
javascriptjquery-select2
62
Raúl Ferràs

Je vous ai donné un exemple montrant comment cela pourrait être fait.

Notez le js mais aussi que j'ai changé #value en un élément input

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

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

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

Exemple de code

Modifier:

Dans la version actuelle de select2, l'attribut de classe est transféré de l'entrée masquée dans l'élément racine créé par select2, même la classe select2-offscreen Qui positionne l'élément de manière très éloignée des limites de page.

Pour résoudre ce problème, il suffit d’ajouter removeClass('select2-offscreen') avant d’appliquer une deuxième fois à select2 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 résoudre ce problème.

62
iMoses

J'utilise avec succès les éléments suivants pour mettre à jour les options de manière dynamique:

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

23
akaspick

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

$('select').select2().trigger('change');
10
Fischer Tirado

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

4
FranBran

Je répare le manque de bibliothèque d'exemple 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/

4
phanhongphucit

Dans mon projet, j'utilise le code suivant:

$('#attribute').select2();
$('#attribute').bind('change', function(){
    var $options = $();
    for (var i in data) {
        $options = $options.add(
            $('<option>').attr('value', data[i].id).html(data[i].text)
        );
    }
    $('#value').html($options).trigger('change');
});

Essayez de commenter la partie select2. Le reste du code fonctionnera toujours.

2
Michal Lohniský