Select2 Скопировать значения из одного select2 в другое

Question

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

Как добавить реплицированные значения из одного элемента управления select2 в другой?

Я попытался следующие:

//Set Up control where values will copy to 
$(hashElement).select2({ 
      multiple: true, 
      data: Details, 
      initSelection: function (element, callback) { 
       data = $.parseJSON(element.val()); 
       callback(data); 
      } 
     }); 


var ApplyGlobalValues = function() { 
     // get hashtag values 
     var values = $("#SelectGlobal").select2("val"); 
     $(".select-children").select2('val', values).trigger("change"); 
    } 

Кнопка пожары ApplyGlobalValues ​​() и initSelection хит, но значения не заполнять. Что я делаю не так?

Answer 1

Ниже я создал пример, который копирует значения select2 в другой select2. Первый трюк заключается в том, что при использовании initSelection вы должны установить атрибут значения по умолчанию для элемента ввода html. Второй трюк: вы должны получить свойство data для элемента select2 вместо свойства val, чтобы получить значения как массив объектов.

HTML:

<input id="select2example1" type="hidden" value="1,1,2"> 
<input id="select2example2" type="hidden" value="1,1,2"> 
<input type="button" id="mybutton" value="copy to other select2"> 

JS:

var data = [{ 
     id: 1, 
     text: "A" 
    }, { 
     id: 2, 
     text: "B" 
    }, { 
     id: 3, 
     text: "C" 
    }]; 


    $("#select2example1").select2({ 
     multiple: true, 
     data: data, 
     initSelection: function (element, callback) { 
      var data = [{ id: 1, text: 'A' }, { id: 3, text: 'C' }]; 
      callback(data); 
     } 
    }); 

    $("#select2example1").select2('val', '1,2'); 

    var ApplyGlobalValues = function() { 

     var values = $("#select2example1").select2("data"); 
     $('#select2example2').select2({ 
      multiple: true, 
      data: data, 
      initSelection: function (element, callback) { 
       var data = values; 
       callback(data); 
      } 
     }); 
    } 

    $("#mybutton").click(function() { 
     ApplyGlobalValues(); 
    }); 

Смотрите также: http://jsfiddle.net/08us1mg5/