Select2 Dropdown Tự động thêm, xóa và làm mới các mục từ

Question

Điều này khiến tôi phát điên! Tại sao cant Select2 thực hiện các phương thức hoặc ví dụ rõ ràng trên trang của họ như thế nào để thực hiện thao tác CRUD đơn giản trên Select2 :)

tôi có một select2 nhận dữ liệu từ cuộc gọi 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    
}); 

Có thể một số phương pháp rõ ràng cách xóa và thêm mục từ Select2.

Ví dụ:

tôi thêm một mục qua cuộc gọi ajax để db, và chỉ muốn thêm một tùy chọn để Select2 và thiết lập nó như là lựa chọn.

Tôi xóa một mục qua ajax sang db và muốn xóa tùy chọn khỏi Select2 và không có tùy chọn nào được chọn.

Answer 1

Từ ví dụ của bạn, tôi có thể thấy rằng bạn đã gắn plugin Select2 vào phần tử ẩn. Bên cạnh đó bạn sử dụng Ajax cuộc gọi đến cư kết quả, vì vậy trong trường hợp này nếu bạn cần phải thêm một lựa chọn mới vào danh sách bạn gọi đơn giản:

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

Trong trường hợp sử dụng lựa chọn yếu tố như một container là cách duy nhất mà tôi tìm thấy là để reinitialize plugin với tùy chọn mới ... Một cái gì đó như thế này:

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

tôi đã cùng một vấn đề. Đây là cách tôi giải quyết nó

này không có gì để làm với Select2, thao tác chính nó có vẻ làm việc cho tôi

Answer 3

tôi đã làm nó theo cách này:

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 

Hy vọng rằng sẽ giúp

Answer 4

Đã quá muộn ... nhưng đây là giải pháp của tôi cho những người vẫn gặp sự cố này:

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

Trong trường hợp của tôi, điều quan trọng cần thêm sau khi thao tác lựa chọn cơ bản là:

$ selectlist.trigger ("change"); // $ selectlist là phần tử chọn cơ bản.

Select2 hoạt động xung quanh sự kiện thay đổi trên lựa chọn, do đó, hãy gọi cập nhật "thay đổi" tùy chọn được hiển thị trong lựa chọn 2.