Select2 Dropdown Динамически добавлять, удалять и обновлять элементы из

Question

Это сводит меня с ума! Почему can not Select2 реализует четкие методы или примеры на своей странице, как делать простые манипуляции с CRUD на Select2 :)

У меня есть select2, который получает данные от вызова ajax.

<input id="valueg" type="hidden" style="width: 300px;" data-placeholder="Select a Conference" /> 

$("#valueg").select2({ 
      data: conferences, 
      allowClear: true, 
      initSelection: function (element, callback) { 
          var data = { id: element.val(), text: element.val() }; 
          callback(data); 
         } 
}).on("change", function (e) { 
// show data in separate div when item is selected    
}); 

Может ли кто-нибудь предоставить четкий способ удаления и добавления элемента из Select2.

Например:

добавить элемент с помощью Ajax вызова к БД, и просто хочет добавить опцию к выбор2 и установить его в качестве выбранного.

Я удаляю элемент через ajax в db и хочу удалить опцию из Select2 и не выбрал никакой опции.

Answer 1

Из вашего примера я вижу, что вы подключили Select2 плагин к скрытому элементу. Кроме того, вы используете Ajax вызов для заполнения результатов, поэтому в этом случае, если вам нужно добавить новый параметр в списке вы простой вызов:

$('#valueg').select2('val', 'YOUR_VALUE'); 

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

var el = $('select[name="type"]', '#details-form'); 
var temp = el.select2('val'); // save current value 
temp.push(NEW_VALUE); // append new one 
var newOptions = '<option value="1">1</option><option value="2">2</option>'; 
el.select2('destroy').html(newOptions).select2().select2('val', temp); 

Answer 2

У меня была та же проблема. Вот как я решил его

Это не имеет ничего общего с выбор2, манипулирует сама, кажется, работает для меня

Answer 3

Я сделал это так:

var $select2 = $('#valueg').select2(); // getting the select2 
var item = 'xyz'; // item to be added 
$select2.val(function(i, val) { // val can take function as parameter 
    val = val || []; // if value is null init val as an array 
    val.push(item); // add the new item 
    return val; 
}).trigger("change"); //refresh 

Надежда, что помогает

Answer 4

Слишком поздно ... но это мое решение для людей, которые все еще имеют эту проблему:

html = ""; 
jQuery("#select_2 option").each(function() 
{ 
    html += '<option value="'+jQuery(this).attr("value")+'">'+jQuery(this).text()+'</option>'; 
}); 
html += '<option value="NEWVALUE">NEW OPTION</option>'; 
jQuery("#select_2").html(html); 

Answer 5

В моем случае, ключевая вещь, чтобы добавить после того, как манипулирование, лежащий в основе выбора является:

$ selectlist.trigger («изменить»); // $ selectlist - основной элемент select.

Select2 работает вокруг события изменения при выборе, поэтому вызов «изменить» обновляет опцию, отображаемую в выборе 2.