AjaxでのSelect2 4.0.0初期値
私はAjax配列から移入されているselect2 v4.0.0を持っています。私はそれが正しい項目（私の場合は＃3）を選択したことを私はJavaScriptのデバッグを介して見ることができるselect2の値を設定した場合、これはまだプレースホルダーを示しています。 
私はこのようなものを見ているはずですが： 
私のフォームフィールドでは：
<input name="creditor_id" type="hidden" value="3">
<div class="form-group minimal form-gap-after">
<span class="col-xs-3 control-label minimal">
<label for="Creditor:">Creditor:</label>
</span>
<div class="col-xs-9">
<div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">
<select class="creditor_select2 input-xlarge form-control minimal select2 col-xs-8">
<option></option>
</select>
</div>
</div>
</div>
私のJavaScript：
var initial_creditor_id = "3";
$(".creditor_select2").select2({
ajax: {
url: "/admin/api/transactions/creditorlist",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
c_id: initial_creditor_id,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
placeholder: "Search for a Creditor",
width: "element",
theme: "bootstrap",
allowClear: true
}).on("select2:select", function (e) {
var selected = e.params.data;
if (typeof selected !== "undefined") {
$("[name='creditor_id']").val(selected.creditor_id);
$("#allocationsDiv").hide();
$("[name='amount_cash']").val("");
$("[name='amount_cheque']").val("");
$("[name='amount_direct']").val("");
$("[name='amount_creditcard']").val("");
}
}).on("select2:unselecting", function (e) {
$("form").each(function () {
this.reset()
});
("#allocationsDiv").hide();
$("[name='creditor_id']").val("");
}).val(initial_creditor_id);
選択ボックスにプレースホルダーではなく選択したアイテムを表示させるにはどうすればよいですか。 AJAX JSONレスポンスの一部としてこれを送信する必要がありますか？
これまで、Select2にはinitSelectionというオプションが必要でした。これはカスタムデータソースが使用されているときはいつでも定義され、コンポーネントの初期選択を決定できるようにします。これはv3.5で私のためにうまく働きました。
あなたはたいていのことを正しくやっています、あなたが当たっている唯一の問題はあなたが新しい値を設定した後あなたがchangeメソッドを引き起こさないことです。 changeイベントがないと、Select2は基になる値が変更されたことを認識できないため、プレースホルダーのみが表示されます。最後の部分をに変更する
.val(initial_creditor_id).trigger('change');
あなたの問題を解決するべきです、そしてあなたはすぐにUIアップデートを見るべきです。
これは、あなたが既に<option>のvalueを持つinitial_creditor_idを持っていると仮定しています。に切り替えるオプションがないため、Select2とブラウザが実際には値を変更できない場合、そしてSelect2が新しい値を検出しません。私は、あなたの<select>にはプレースホルダーのための一つのオプションしか含まれていないことに気づきました、それはあなたが手動で新しい<option>を作成する必要があることを意味します。
var $option = $("<option selected></option>").val(initial_creditor_id).text("Whatever Select2 should display");
そして、それをSelect2を初期化した<select>に追加します。外部ソースからテキストを取得する必要があるかもしれません。これはinitSelectionが登場した場所です。これは、Select2 4.0.0でも可能です。標準のselectのように、これはAJAXリクエストを行って値を取得してから<option>テキストをその場で調整するように設定する必要があることを意味します。
var $select = $('.creditor_select2');
$select.select2(/* ... */); // initialize Select2 and any events
var $option = $('<option selected>Loading...</option>').val(initial_creditor_id);
$select.append($option).trigger('change'); // append the option and update Select2
$.ajax({ // make the request for the selected data object
type: 'GET',
url: '/api/for/single/creditor/' + initial_creditor_id,
dataType: 'json'
}).then(function (data) {
// Here we should have the data object
$option.text(data.text).val(data.id); // update the text that is displayed (and maybe even the value)
$option.removeData(); // remove any caching data that might be associated
$select.trigger('change'); // notify JavaScript components of possible changes
});
これは多くのコードのように見えますが、すべての変更が行われたことを確認するためのSelect2以外の選択ボックスの場合、これはまさにその方法ですです。
私がやったことはもっときれいで、2つの配列を作る必要があります。
- 一つは、IDとテキスト（私の場合はあなたのtemplateResultに応じて、そのIDと名前）を含むObjectのリスト（あなたがajaxクエリから得たもの）を含みます。
- 2番目はIDの配列（選択値）だけです
最初の配列をデータとして、2番目の配列をvalとして、select2を初期化します。
パラメータとしてid：nameの辞書を持つ関数の例。
function initMyList(values) {
var selected = [];
var initials = [];
for (var s in values) {
initials.Push({id: s, name: values[s].name});
selected.Push(s);
}
$('#myselect2').select2({
data: initials,
ajax: {
url: "/path/to/value/",
dataType: 'json',
delay: 250,
data: function (params) {
return {
term: params.term,
page: params.page || 1,
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
minimumInputLength: 1,
tokenSeparators: [",", " "],
placeholder: "Select none, one or many values",
templateResult: function (item) { return item.name; },
templateSelection: function (item) { return item.name; },
matcher: function(term, text) { return text.name.toUpperCase().indexOf(term.toUpperCase()) != -1; },
});
$('#myselect2').val(selected).trigger('change');
}
あなたはAjax呼び出しを使用して初期値を供給することができ、そしてselect2初期化をするためにjquery約束を使用することができます。
changeトリガーにカスタムコードが含まれていたため、trigger('change')に強制されるという問題は私を悩ませました。これはユーザーがドロップダウンのオプションを変更したときにのみトリガーされるはずです。 IMOでは、開始時にinit値を設定するときに変更をトリガーするべきではありません。
私は深く掘り下げて、そして以下を見つけました： https://github.com/select2/select2/issues/362
例：
$dropDown.val(1).trigger('change.select2');
それは私のために働きます...
JQueryを使用せず、HTMLのみを使用します。option valueを作成します。selectedと表示します。 IDが入っていればselect2 data自動的に選択されます。
<select id="select2" name="mySelect2">
<option value="mySelectedValue">
Hello, I'm here!
</option>
</select>
あなたがtemplateSelectionとajaxを使っているなら、これらの他の答えのいくつかはうまくいかないかもしれません。データオブジェクトでidとtext以外の値が使用されている場合、新しいoption要素を作成してvalueとtextを設定しても、テンプレートメソッドを満たすことはできません。
これは私のために働いたものです：
$("#selectElem").select2({
ajax: { ... },
data: [YOUR_DEFAULT_OBJECT],
templateSelection: yourCustomTemplate
}
こちらのjsFiddleをチェックしてください。 https://jsfiddle.net/shanabus/f8h1xnv4
私の場合、データに必須のprocessResultsおよびidフィールドが含まれていなかったので、textを入力する必要がありました。あなたがこれをする必要があるならば、あなたは同じ機能を通してあなたの最初の選択を実行する必要もあるでしょう。そのようです：
$(".js-select2").select2({
ajax: {
url: SOME_URL,
processResults: processData
},
data: processData([YOUR_INIT_OBJECT]).results,
minimumInputLength: 1,
templateSelection: myCustomTemplate
});
function processData(data) {
var mapdata = $.map(data, function (obj) {
obj.id = obj.Id;
obj.text = '[' + obj.Code + '] ' + obj.Description;
return obj;
});
return { results: mapdata };
}
function myCustomTemplate(item) {
return '<strong>' + item.Code + '</strong> - ' + item.Description;
}
私が人々が実際に答えているのを見たことがないシナリオの1つは、オプションがAJAXであるときにどのように事前選択をするかであり、あなたは複数を選択することができます。これはAJAX事前選択のページですので、ここに解決策を追加します。
$('#mySelect').select2({
ajax: {
url: endpoint,
dataType: 'json',
data: [
{ // Each of these gets processed by fnRenderResults.
id: usersId,
text: usersFullName,
full_name: usersFullName,
email: usersEmail,
image_url: usersImageUrl,
selected: true // Causes the selection to actually get selected.
}
],
processResults: function(data) {
return {
results: data.users,
pagination: {
more: data.next !== null
}
};
}
},
templateResult: fnRenderResults,
templateSelection: fnRenderSelection, // Renders the result with my own style
selectOnClose: true
});
解決策を探すために数時間を費やした後、私は自分自身を作成することにしました。彼はそれです：
function CustomInitSelect2(element, options) {
if (options.url) {
$.ajax({
type: 'GET',
url: options.url,
dataType: 'json'
}).then(function (data) {
element.select2({
data: data
});
if (options.initialValue) {
element.val(options.initialValue).trigger('change');
}
});
}
}
そして、この関数を使って選択を初期化することができます：
$('.select2').each(function (index, element) {
var item = $(element);
if (item.data('url')) {
CustomInitSelect2(item, {
url: item.data('url'),
initialValue: item.data('value')
});
}
else {
item.select2();
}
});
そしてもちろん、これはHTMLです：
<select class="form-control select2" id="test1" data-url="mysite/load" data-value="123"></select>
https://github.com/select2/select2/issues/4272 これだけが私の問題を解決しました。オプションでデフォルト値を設定したとしても、text属性を持つオブジェクトをフォーマットする必要があります。これがオプションに表示されるものです。そのため、あなたのフォーマット関数は空ではない属性を選択するために||を使用しなければなりません。
Select2 4.0.3のde初期選択値で単純なajaxコンボを作成します。
<select name="mycombo" id="mycombo""></select>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
selectMaker.create('table', 'idname', '1', $("#mycombo"), 2, 'type');
});
</script>
ライブラリ.js
var selectMaker = {
create: function (table, fieldname, initialSelected, input, minimumInputLength = 3, type ='',placeholder = 'Select a element') {
if (input.data('select2')) {
input.select2("destroy");
}
input.select2({
placeholder: placeholder,
width: '100%',
minimumInputLength: minimumInputLength,
containerCssClass: type,
dropdownCssClass: type,
ajax: {
url: 'ajaxValues.php?getQuery=true&table=' + table + '&fieldname=' + fieldname + '&type=' + type,
type: 'post',
dataType: 'json',
contentType: "application/json",
delay: 250,
data: function (params) {
return {
term: params.term, // search term
page: params.page
};
},
processResults: function (data) {
return {
results: $.map(data.items, function (item) {
return {
text: item.name,
id: item.id
}
})
};
}
}
});
if (initialSelected>0) {
var $option = $('<option selected>Cargando...</option>').val(0);
input.append($option).trigger('change'); // append the option and update Select2
$.ajax({// make the request for the selected data object
type: 'GET',
url: 'ajaxValues.php?getQuery=true&table=' + table + '&fieldname=' + fieldname + '&type=' + type + '&initialSelected=' + initialSelected,
dataType: 'json'
}).then(function (data) {
// Here we should have the data object
$option.text(data.items[0].name).val(data.items[0].id); // update the text that is displayed (and maybe even the value)
$option.removeData(); // remove any caching data that might be associated
input.trigger('change'); // notify JavaScript components of possible changes
});
}
}
};
そしてphpサーバー側
<?php
if (isset($_GET['getQuery']) && isset($_GET['table']) && isset($_GET['fieldname'])) {
//parametros carga de petición
parse_str(file_get_contents("php://input"), $data);
$data = (object) $data;
if (isset($data->term)) {
$term = pSQL($data->term);
}else{
$term = '';
}
if (isset($_GET['initialSelected'])){
$id =pSQL($_GET['initialSelected']);
}else{
$id = '';
}
if ($_GET['table'] == 'mytable' && $_GET['fieldname'] == 'mycolname' && $_GET['type'] == 'mytype') {
if (empty($id)){
$where = "and name like '%" . $term . "%'";
}else{
$where = "and id= ".$id;
}
$rows = yourarrayfunctionfromsql("SELECT id, name
FROM yourtable
WHERE 1 " . $where . "
ORDER BY name ");
}
$items = array("items" => $rows);
$var = json_encode($items);
echo $var;
?>
単純で意味論的な解決策のために、私はHTMLで初期値を定義することを好む、例えば：
<select name="myfield" data-placeholder="Select an option">
<option value="initial-value" selected>Initial text</option>
</select>
だから私は$('select').select2({ ajax: {...}});を呼び出すとき、初期値はinitial-valueであり、そのオプションテキストはInitial textです。
私の現在のSelect2のバージョンは 4.0. ですが、他のバージョンとの互換性が非常に高いと思います。
主に上記のコメントができないため、この回答を追加します。私はそれが@Nickiと彼女のjsfiddle、 https://jsfiddle.net/57co6c95/ によるコメントであることがわかりました。
とりわけ、それはjsonが必要とするフォーマットの例を示しました。私がしなければならなかった唯一の変更は私の初期結果が他のajax呼び出しと同じフォーマットで返されたので私が使用しなければならなかったということでした
$option.text(data[0].text).val(data[0].id);
のではなく
$option.text(data.text).val(data.id);