Select2に「新しい項目を追加」オプションを追加する必要があります
リストの最初の要素に「新しい項目を追加」するボタンを追加したい。ユーザーがそのボタンをクリックした場合、ポップアップを開いてユーザーから入力を取得する必要があります。 select2プラグインでこれを行う方法？これのデフォルトのオプションは（または）これをカスタマイズする必要がありますか？
これが私のアプローチです
$('#select2')
.select2()
.on('select2:open', () => {
$(".select2-results:not(:has(a))").append('<a href="#" style="padding: 6px;height: 20px;display: inline-table;">Create new item</a>');
})
基本的にKldが提案したものですが、OPはselectの最初のオプションを使用して新しい値モーダルをトリガーしたいので、追加のボタンはありません。 select2：closeイベントがトリガーされたときに値をチェックし、"NEW"が選択され、新しい値の入力を求め、selectボックスの最後に追加して選択します。
注：入力で検索を無効にし、プレースホルダーを追加しました
$(function () {
$(".select2")
.select2({
placeholder: 'Select type',
width: '50%',
minimumResultsForSearch: Infinity
})
.on('select2:close', function() {
var el = $(this);
if(el.val()==="NEW") {
var newval = Prompt("Enter new value: ");
if(newval !== null) {
el.append('<option>'+newval+'</option>')
.val(newval);
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="mySel" class="select2">
<option></option>
<option value="NEW">Add new type</option>
<option>Car</option>
<option>BUS</option>
<option>TWO</option>
<option>THREE</option>
</select> $('#my-select2').select2().on('select2:open', function () {
var a = $(this).data('select2');
if (!$('.select2-link').length) {
a.$results.parents('.select2-results')
.append('<div class="select2-link"><a>New item</a></div>')
.on('click', function (b) {
a.trigger('close');
// add your code
});
}
});
HTMLコード
<div class="input-group">
<select class="form-control select2-hidden-accessible" data-plugin="select2" id='select' tabindex="-1" aria-hidden="true">
<optgroup label="Select Cutomer">
<option value="AK">Zilal</option>
<option value="HI">Ajay</option>
</optgroup>
</select>
<div class="wrapper" id="wrp" style="display: none;">
<a href="#" id="type" class="font-weight-300" data-target="#mdl_Item" data-toggle="modal">+ Add New Vendor</a>
</div>
</div>
JavaScriptコード：
$(document).ready(function () {
var flg = 0;
$('#select').on("select2:open", function () {
flg++;
if (flg == 1) {
$this_html = jQuery('#wrp').html();
$(".select2-results").append("<div class='select2-results__option'>" +
$this_html + "</div>");
}
});
});
出力は次のようになります。
jQuery("#select2-"+yourelementid+"-container").off().on('click',function(){
jQuery("#yourelementid"_add").remove();
jQuery("#select2-"+yourelementid+"-results").after("<div id='"+yourelementid+"_add' >optionnameforadding</div> ").promise().done(function(){
jQuery("#"+yourelementid+"_add").off().on('click',function(){
// yourfunctionfordisplayingdiv
});
});
});
ulリスト-select2-"+ yourelementid +"-resultsの後にhtmlコンテンツを追加し、それを使ってできることは何でもできます。結果を選択ボックスの値として設定するだけです
私が複数選択に使用したmodpedの回答の修正版
$('.select2').select2().on('select2:close', function() {
var el, newOption, newval;
el = $(this);
if (el.val() !== null && el.val()[0] === '') {
el.val(el.val().slice(1));
el.trigger('change');
newval = Prompt("Enter new value:");
if (newval !== null && newval !== '') {
newOption = new Option(newval, newval, true, true);
return el.append(newOption).trigger('change');
}
}
});
この方法でselect2に新しいオプションを追加できます
$('button').click(function(){
var value = Prompt("Please enter the new value");
$(".mySelect")
.append($("<option></option>")
.attr("value", value )
.text(value ));
})
これを試してみてください
$('#yourDropdownId').select2({
ajax: {
url: productUrl,
dataType: 'json',
data: function (params) {
var query = {
search: params.term,
page: params.page || 1
}
// Query parameters will be ?search=[term]&page=[page]
return query;
},processResults: function (data, params) {
console.log(data)
return {
results: $.map(data.items, function (item) {
return {
text: item.item_name,
id: item.item_id
}
})
};
},
cache: true,
},language: {
noResults: function() {
return "<a data-toggle='modal' data-target='#myModal' href='javascript:void();'>Open Model</a>";
}
},escapeMarkup: function (markup) {
return markup;
}
});
この主題についてかなり長い間調べた後、私は思う私はこの問題の解決策を持っています。
Select2は、操作しているSelectに関係なく、DOM内に独自の構造を作成しているようです。 -これは、DOMの他の場所で作成したSelectから完全に独立しているようにも見えます。
だから...少しいじった後、私は次のコードを思いつきました：
最初：DOM内のすべての選択へのグローバルバインディングを作成します。これは、現在のユーザーが作業している「対象」への一時的な参照を設定するためだけです-後で使用できるグローバル変数を作成します。
$('select').select2().on('select2:open', function() {
// set a global reference for the current selected Select
console.log('found this ---> '+$(this).attr('id'));
if (typeof tempSelectedObj === 'undefined') {
tempSelectedObj = null;
}
tempSelectedObj = this;
});
2番目：Select2一時INPUTおよびselect2-search__fieldクラスにマップされるドキュメント「keyup」イベントを作成します。これにより、Select2 INPUTのすべてのキーイベントがキャプチャされます。しかし、この場合、マジックを開始するためにkeyCode === 13（リターン文字）を追加しました。
$(document).on('keyup','input.select2-search__field',function (e) {
// capture the return event
if (e.keyCode === 13) {
var newValue = $(this).val();
console.log('processing this: '+newValue);
// create new option element
var newOpt = $('<option>')
.val(newValue)
.text(newValue);
// append to the current Select
$(tempSelectedObj)
.append(newOpt);
// apply the change and set it
$(tempSelectedObj)
.val(newValue)
.select2('close');
}
})
リターン文字が検出されると、次のことが起こります。
- 現在の値を取得する
- 新しいDOMオプション要素（jQuery）を作成する
- 新しいオプション要素の値とテキストを設定する
- 新しいオプション要素をtempSelectedObj変数（jQuery）に追加します。
- select2をトリガーして閉じます
- select2の値を、追加された新しい値に設定します
- select2の最後の変更をトリガーして、新しいオプションを表示します。
- やった！
この例では明らかにコードの2つのセクションが必要ですが、多くの人が苦労しているように見える問題に対しては、これはかなり洗練されたアプローチだと思います。また、他の目的に合わせて簡単に調整できるほど汎用的です。
お役に立てれば！私はこれにしばらくの間苦労しました。
これが実際の例です：