selezionare2 cambiare gli articoli dinamicamente

Question

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

I valori della seconda select vengono memorizzati in una matrice bidimensionale:

[ [{"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 select. Quindi in un evento 'change' sul primo dovrei essere in grado di modificare gli elementi select-two contains.

Leggere la documentazione Penso di aver bisogno dell'opzione "data" ... ma non di shure 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> 

Answer 1

Ho fatto un esempio per voi che mostra come questo potrebbe essere fatto.

Avviso i js, ma anche che ho cambiato # valore in un elemento di ingresso

<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'); 

Code Example

Modifica:

Nella versione corrente di select2 l'attributo di classe viene trasferito dall'input nascosto nell'elemento root creato da select2, anche nella 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 Code Example per risolvere questo problema.

Answer 2

ho fissare la mancanza di biblioteca 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/

Answer 3

Prova utilizzando la proprietà trigger per questo:

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

Answer 4

Per v4 questo è un problema noto che ha vinto' t essere affrontato in 4.0 ma c'è una soluzione alternativa. Controllare https://github.com/select2/select2/issues/2830

Answer 5

Nel mio progetto Io uso 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'); 
}); 

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

Answer 6

sto usando con successo quanto segue per aggiornare le opzioni in modo dinamico:

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