Select2 Dropdown Itemsを動的に追加、削除、更新する

Question

これは私を狂ってしまう！ Select2で簡単なCRUD操作を行う方法を説明しています。なぜなら、Select2はajax呼び出しからデータを取得するselect2を持っているからです。

<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からアイテムを削除して追加する方法を明確にする方法があります。例えば

：

私はDBへのAJAX呼び出しを経由してアイテムを追加し、ちょうどSelectセレクトにオプションを追加し、選択されたとして、それを設定したいです。

ajaxからdbにアイテムを削除し、Select2からオプションを削除して、オプションを選択しないようにしたいとします。

Answer 1

あなたの例では、Select2プラグインを隠し要素に接続しています。この場合には、あなたがリストに新しいオプションを追加する必要がある場合に加えて、あなたは、結果を移入するためにAjax呼び出しを使用しますシンプルなコール：コンテナとしてselect要素を使用する場合には

$('#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

私は同じ問題がありました。これは、私はそれを解決する方法です

これはSELECT2とは何の関係も、それ自体が私

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

これは遅すぎます...しかし、これはまだこの問題を抱えている人々のための私のソリューションです：

私の場合は

Answer 5

、根本的な選択操作後に追加するための重要な事がある：

の$ selectlist.trigger（「変更」）; // $ selectlistは基本となるselect要素です。

Select2はselectのchangeイベントを回避するので、select "2"に表示されているオプションが更新されます。