Select2 изменение элементов динамически

У меня есть два выбора, которые связаны: каждое значение первого выбора определяет, какие элементы будут отображаться во втором выборе.

Значения второго выбора сохраняются в двухмерном массиве:

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

Первое значение выбора определяет индекс, который будет использоваться для заполнения второго выбора. Поэтому в событии "change" в первом случае я должен иметь возможность изменять элементы select-two.

Документация для чтения. Мне кажется, мне нужно использовать параметр "data"... но не пытаюсь понять, как пример загружает данные массива при инициализации и, похоже, не работает, если я попытаюсь сделать то же самое после инициализации.

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>

Ответ 1

Я привел пример, показывающий, как это можно сделать.

Обратите внимание на js, но также на то, что я изменил # значение на элемент ввода

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

и что я запускаю событие change для получения начальных значений

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

Пример кода

Edit:

В текущей версии select2 атрибут класса переносится со скрытого ввода в корневой элемент, созданный select2, даже класс select2-offscreen, который позиционирует элемент вне пределов страницы.

Чтобы исправить эту проблему, нужно всего лишь добавить removeClass('select2-offscreen'), прежде чем применять select2 второй раз в том же элементе.

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

Я добавил новый Пример кода, чтобы решить эту проблему.

Ответ 2

Я успешно использую следующее для динамического обновления параметров:

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

Ответ 3

Попробуйте использовать свойство trigger для этого:

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

Ответ 4

Для v4 это известная проблема, которая не будет рассмотрена в 4.0, но есть обходной путь. Проверьте https://github.com/select2/select2/issues/2830

Ответ 5

В моем проекте я использую следующий код:

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

Попробуйте прокомментировать часть select2. Остальная часть кода будет работать.

Ответ 6

Я исправляю отсутствие библиотеки примеров здесь:

<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css'; return false;" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js">

http://jsfiddle.net/bbAU9/328/