select2 zmiana pozycji dynamicznie

Question

Mam dwa zaznaczenia, które są połączone: Każda wartość pierwszego wyboru określa, które elementy będą wyświetlane w drugim wyborze.

Wartości drugie wybrania są przechowywane w tablicy dwa wymiary:

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

Pierwszy dobrać wartość określa indeks jest stosowany do wypełnienia drugiej wybierz. Tak więc w przypadku "zmiany" na pierwszym, powinienem móc modyfikować elementy select-two zawiera.

Czytanie dokumentacji Myślę, że potrzebuję skorzystać z opcji "danych" ... ale nie wyjaśnię, jak przykład ładuje dane tablicy podczas inicjalizacji i wygląda na to, że nie działa, jeśli spróbuję zrobić to samo po inicjalizacji .

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

zrobiłem dla was przykładem pokazując, jak można to zrobić.

Wskazówka js ale również, że zmienił #ARG do elementu wejściowego

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

i że jestem wyzwalania zdarzenie change uzyskania wartości początkowe

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

Code Example

Edytuj:

W bieżącej wersji select2 atrybut klasy jest przenoszony z ukrytego wejścia do elementu głównego utworzonego przez select2, nawet klasa select2-offscreen, która pozycjonuje element poza granicami strony.

Aby rozwiązać ten problem, wystarczy dodać removeClass('select2-offscreen') przed ponownym zastosowaniem opcji select2 na tym samym elemencie.

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

Dodałem nową Code Example aby rozwiązać ten problem.

Answer 2

naprawić brak biblioteki przykład tu:

<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

Spróbuj użyć właściwość wyzwalania dla tego:

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

Answer 4

Dla v4 Jest to znany problem, który wygrał” należy się zająć w 4.0, ale istnieje obejście. Sprawdzić https://github.com/select2/select2/issues/2830

Answer 5

w moim projekcie używam następujący kod:

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

Spróbuj wykomentuj część select2. Reszta kodu nadal będzie działać.

Answer 6

ja z powodzeniem przy użyciu następujących opcji dynamicznie aktualizować:

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