data - windows document javascript

selezionare2 cambiare gli articoli dinamicamente (4)

Ho fatto un esempio per te che mostri come questo potrebbe essere fatto.

Notare il js ma anche che ho cambiato #value in un elemento di input

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

e che sto attivando l'evento change per ottenere i valori iniziali

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

Esempio di codice

Modificare:

Nella versione corrente di select2 l'attributo di classe viene trasferito dall'input nascosto nell'elemento root creato da select2, anche la classe select2-offscreen che posiziona l'elemento al di fuori dei limiti della pagina.

Per risolvere questo problema è sufficiente aggiungere removeClass('select2-offscreen') prima di applicare select2 una seconda volta sullo stesso elemento.

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

Ho aggiunto un nuovo esempio di codice per risolvere questo problema.

Ho due selezioni collegate: Ogni valore della prima selezione determina quali elementi saranno visualizzati nella seconda selezione.

I valori della seconda selezione sono memorizzati in una matrice a due dimensioni:

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

Il primo valore di selezione determina l'indice da utilizzare per popolare la seconda selezione. Quindi in un evento 'change' sul primo dovrei essere in grado di modificare gli elementi select-two contains.

Leggendo la documentazione penso di aver bisogno di usare l'opzione "data" ... ma non di sapere come l'esempio carica i dati dell'array sull'inizializzazione e sembra non funzionare se provo a fare lo stesso dopo l'inizializzazione.

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>

Nel mio progetto uso il seguente codice:

$('#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');
});

Prova a commentare la parte select2. Il resto del codice funzionerà ancora.

Prova a utilizzare la proprietà trigger per questo:

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

Risolvo la mancanza della libreria di esempio qui:

<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/