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

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

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

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

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

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

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>
6 55
javascript jquery-select2

6 ответов:

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

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

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

я добавил новый Пример Кода для решения этого вопроса.

59

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

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

21

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

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

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

4

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

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

3

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

$('#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. Остальная часть кода все равно будет работать.

2