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

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.