Выпадающий список Select2 Динамическое добавление, удаление и обновление элементов из

Это сводит меня с ума! Почему 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 в db и просто хочу добавить параметр в Select2 и установить его как выбранный.

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


javascript jquery-select2
person dotsa    schedule 07.05.2013    source источник

Ответы (5)


arrow_upward
17
arrow_downward

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

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

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

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);
person nKognito    schedule 30.05.2013

arrow_upward
4
arrow_downward

Я сделал это следующим образом:

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

надеюсь, это поможет

person ashraf aaref    schedule 24.02.2016
comment
Спустя годы это единственный способ заставить его работать. Спасибо. - person Watercayman; 14.02.2020

arrow_upward
4
arrow_downward

Я была такая же проблема. Вот как я это решил

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

 $("#lstService").empty();
  for(var i=0;i<data.length;i++){
     $("#lstService").append('<option value="'+data[i].service_id+'">'+data[i].service_name+'</option>');
 }
person Veeru    schedule 08.11.2014

arrow_upward
1
arrow_downward

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

$selectlist.trigger("change"); //$selectlist — это базовый элемент выбора.

Select2 работает с событием изменения для выбора, поэтому вызов «change» обновляет параметр, отображаемый в выборе 2.

person Forer    schedule 29.11.2016

arrow_upward
0
arrow_downward

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

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);
person Eloy Fernández Franco    schedule 17.03.2016