AJAXを使用してデータを入力するjQuery Select2コントロールがあります。
<input type="text" name="select2" id="select2" style='width:400px' value="999">
var initialSelection = { id: '999', text:"Some initial option"};
$("#select2").select2({
placeholder: "Select Option",
minimumInputLength: 2,
ajax: {
url: "/servletToGetMyData",
dataType: 'json',
data: function (term, page) { return { term: term }; },
results: function (data, page) { return { results: data.results} }
},
initSelection : function(element, callback){ callback(initialSelection); },
escapeMarkup: function (m) { return m; }
});
AJAXは可能なオプションのデータベースにリンクしており、ご覧のとおり、2文字の入力が必要です。
問題は、オプションがデータベースに存在しない場合、ユーザーがダイアログを使用して新しいオプションを追加できることです。そのダイアログから戻ったら、私は試してみます:
var o = $("<option/>", {value: newID, text: newText});
$('#select2').append(o);
$('#select2 option[value="' + newID + '"]').prop('selected',true);
$('#select2').trigger('change');
しかし、それは機能しません。同じ正確なコードは、非AJAX Select2ボックスに対して機能します。 $('#select2').select2("val", newID);
を使用するなど、さまざまな代替手段を試しましたが、機能しません。
Select2コントロールを完全に削除してみました。ただし、$('#select2').remove()
は元の<input>フィールドのみを削除し、Select2コントロールはそのまま残ります。ページには複数のSelect2コントロールがあるため、必要な他のコントロールを削除するため、Select2コントロールにはクラスセレクターを使用できません。
A)AJAXを使用するSelect2コントロールにオプションを動的に追加する方法。またはb)Select2コントロールを完全に削除して、プログラムで追加できるようにしますか?または他のソリューション...
編集 .select2( "destroy")を使用して、select2要素を削除する方法を示す別の質問を見つけました。これは機能しますが、私の意見では、最適ではありません。 select2を破棄して再作成するよりも、オプションを追加するだけの方がずっと好きです。
これは簡単な解決策を提供しました: AJAXで挿入した後Select2にデータを設定します
$("#select2").select2('data', {id: newID, text: newText});
これは、select2 v4から始める方がはるかに簡単です。 new Option
を作成し、select
要素に直接追加できます。 codepen または以下の例を参照してください。
$(document).ready(function() {
$("#state").select2({
tags: true
});
$("#btn-add-state").on("click", function(){
var newStateVal = $("#new-state").val();
// Set the value, creating a new option if necessary
if ($("#state").find("option[value=" + newStateVal + "]").length) {
$("#state").val(newStateVal).trigger("change");
} else {
// Create the DOM option that is pre-selected by default
var newState = new Option(newStateVal, newStateVal, true, true);
// Append it to the select
$("#state").append(newState).trigger('change');
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<select id="state" class="js-example-basic-single" type="text" style="width:90%">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<br>
<br>
<input id="new-state" type="text" />
<button type="button" id="btn-add-state">Set state value</button>
ヒント:「AL」や「WY」などの既存の値をテキストボックスに入力してみてください。次に、いくつかの新しい値を追加してみてください。
Select2バージョン4+の場合
構文が変更されたため、次のように記述する必要があります。
// clear all option
$('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]});
// clear and add new option
$("#select_with_data").html('').select2({data: [
{id: '', text: ''},
{id: '1', text: 'Facebook'},
{id: '2', text: 'Youtube'},
{id: '3', text: 'Instagram'},
{id: '4', text: 'Pinterest'}]});
// append option
$("#select_with_data").append('<option value="5">Twitter</option>');
$("#select_with_data").val('5');
$("#select_with_data").trigger('change');
Select2 4.0.2で
$("#yourId").append("<option value='"+item+"' selected>"+item+"</option>");
$('#yourId').trigger('change');
このリンクの助けを借りて問題を解決しました http://www.bootply.com/122726 。うまくいけばあなたを助けるでしょう
Select2 jqueryにオプションを追加し、バックエンドからの新しいオプション用に作成されたリンクID(#addNew)でajax呼び出しをバインドします。そしてコード
$.getScript('http://ivaynberg.github.io/select2/select2-3.4.5/select2.js',function(){
$("#mySel").select2({
width:'240px',
allowClear:true,
formatNoMatches: function(term) {
/* customize the no matches output */
return "<input class='form-control' id='newTerm' value='"+term+"'><a href='#' id='addNew' class='btn btn-default'>Create</a>"
}
})
.parent().find('.select2-with-searchbox').on('click','#addNew',function(){
/* add the new term */
var newTerm = $('#newTerm').val();
//alert('adding:'+newTerm);
$('<option>'+newTerm+'</option>').appendTo('#mySel');
$('#mySel').select2('val',newTerm); // select the new term
$("#mySel").select2('close'); // close the dropdown
})
});
<div class="container">
<h3>Select2 - Add new term when no search matches</h3>
<select id="mySel">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
<option>Twenty Four</option>
</select>
<br>
<br>
</div>
Bumptious Q Bangwhistleの答えを拡張する:
$('#select2').append($('<option>', {
value: item,
text : item
})).select2();
これにより、新しいオプションが<select>
タグに追加され、select2で再レンダリングできます。
私はこの方法でそれをしました、そして、それは魅力のように私のために働きました。
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2,
text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$(".js-example-data-array").select2({
data: data
})
$("#my_select").select2('destroy').empty().select2({data: [{id: 1, text: "new_item"}]});
動的タグ付けをajaxで機能させるために、私がやったことは次のとおりです。
Select2バージョン3.5
これはcreateSearchChoice
フックを提供するため、バージョン3.5では簡単です。 multiple: true
およびtags: true
が設定されている限り、複数選択に対しても機能します。
HTML
<input type="hidden" name="locations" value="Whistler, BC" />
JS
$('input[name="locations"]').select2({
tags: true,
multiple: true,
createSearchChoice: function(term, data) {
if (!data.length)
return { id: term, text: term };
},
ajax: {
url: '/api/v1.1/locations',
dataType: 'json'
}
});
ここでのアイデアは、ユーザーが入力したcreateSearchChoice
とajax応答(term
として)の両方を渡すselect2のdata
フックを使用することです。 ajaxが空のリストを返す場合、select2にユーザー入力term
をオプションとして提供するように指示します。
デモ: https://johnny.netlify.com/select2-examples/version
Select2バージョン4.X
バージョン4.XにはcreateSearchChoice
フックがありませんが、ここで同じことを行いました。
HTML
<select name="locations" multiple>
<option value="Whistler, BC" selected>Whistler, BC</option>
</select>
JS
$('select[name="locations"]').select2({
ajax: {
url: '/api/v1.1/locations',
dataType: 'json',
data: function(params) {
this.data('term', params.term);
return params;
},
processResults: function(data) {
if (data.length)
return {
results: data
};
else
return {
results: [{ id: this.$element.data('term'), text: this.$element.data('term') }]
};
}
}
});
アイデアは、ユーザーがselect2のdata
フック内のjQueryのデータストアに入力した用語を隠蔽することです。次に、select2のprocessResults
フックで、ajax応答が空かどうかを確認します。そうである場合、ユーザーが入力した隠された用語を取得し、select2のオプションとして返します。