web-dev-qa-db-ja.com

Select2ドロップダウン動的にアイテムを追加、削除、更新

これは私を夢中にさせます！ Select2がSelect2で簡単なCRUD操作を行う方法をページに明確なメソッドまたは例を実装できない理由:)

私は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呼び出しを介して項目を追加し、Select2にオプションを追加して、選択済みに設定したいだけです。

Ajax経由でdbにアイテムを削除し、Select2からオプションを削除したいが、オプションが選択されていない。

javascriptjquery-select2
17
dotsa

あなたの例から、私はあなたが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);
17
nKognito

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

これはselect2とは何の関係もありません。

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

私はこのようにしました：

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

役立つことを願っています

2
ashraf aaref

手遅れです...しかし、これはまだこの問題を抱えている人々のための私の解決策です：

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);
0
Eloy Fernández Franco

私の場合、基になる選択を操作した後に追加する重要なことは次のとおりです。

$selectlist.trigger("change"); // $ selectlistは、基礎となる選択要素です。

Select2はselectのchangeイベントを回避するため、「change」を呼び出すと、select 2に表示されるオプションが更新されます。

0
Forer