我对Select2遇到了一些问题，基本上我需要用从Select2 Ajax搜索中检索到的数据来填充其他一些表单字段。
甚至以下示例在这里找到：
Select2 4.0 - Push new entry after creation
我无法以编程方式将Select2的结果填充到某些字段中
举例来说，假设我有三个字段，我可以使用其中两个字段来搜索数据，并且我希望在选择ajax调用返回值之一后，其他剩余字段将自动填充。
因此，例如：
Test field 01 (Select2 field)
Test field 02 (Select2 field)
Test field 03 (standard input field)
如果我在“测试字段01”上搜索内容，我希望02和03将自动填充。
我已经实现了一种解决方案，您可以在下面找到它，但不适用于Select2字段，只能用于输入一个。
如果我使用代码检查器，则会看到“ select”元素内的新选项已正确创建并标记为“ selected”，但似乎在触发“ change”事件后“ select2-selection__rendered”跨度元素未正确更新
在测试过程中，我还注意到，每次我从结果中选择一个值并因此在目标选择框中找到4次相同值时，每次都会调用四次用于更新数据的函数“ updateselect2”。
看看下面的gif动画，看看完整的行为
我做错了什么？
我的设置是：
的jquery-3.1.0
选择2 4.0.3
您可以在下面找到我当前工作的完整示例：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>Test</title>
<script src="jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="select2.min.css"/>
<script src="select2.full.js"></script>
</head>
<body>
<div class="section ">
<div class="container ">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="testField01" class="control-label">Test field 01</label>
<select id="testField01" class="form-control" name="testField01" style="width:150px;">
<option value=""></option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="testField02" class="control-label" >Test field 02</label>
<select id="testField02" class="form-control" name="testField02" style="width:150px;">
<option value=""></option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="testField03" class="control-label" style="width:150px;">Test field 03</label>
<input id="testField03" class="form-control" value="" readonly="readonly" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JAVASCRIPT：
var select2_query = {};
function markMatch(text, term) {
// Find where the match is
var match = text.toUpperCase().indexOf(term.toUpperCase());
var $result = $('<span></span>');
// If there is no match, move on
if (match < 0) {
return $result.text(text);
}
// Put in whatever text is before the match
$result.text(text.substring(0, match));
// Mark the match
var $match = $('<span style="color:red"></span>');
$match.text(text.substring(match, match + term.length));
// Append the matching text
$result.append($match);
// Put in whatever is after the match
$result.append(text.substring(match + term.length));
return $result;
}
function updateselect2(elId, values) {
var $element = $('#' + elId); // the element that Select2 is initialized on
if ($element.attr('id') == undefined) {
return false;
}
$element.empty();
var $option = $("<option selected></option>"); // the new base option
$option.val(values[elId]); // set the id
$option.text(values[elId]); // set the text
$element.append($option); // add it to the list of selections
$element.trigger("change"); // tell Select2 to update
}
function formatResult(result) {
if (result.loading) {
return result.text;
}
var term = select2_query.term || '';
var $formattedResult = markMatch(result.testField01 + ' - ' + result.testField03, term);
return $formattedResult;
}
function formatSelection(selection) {
if (!selection.selected) {
updateselect2('testField02', selection);
$('#testField03').val(selection.testField03);
}
return selection.testField01;
}
function initSearch(fieldId, searchType) {
$("#" + fieldId).select2({
ajax: {
url: "/search/data",
dataType: 'json',
delay: 250,
data: function (params) {
return {
id: params.term, // search term
by: searchType,
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 4,
templateResult: formatResult,
templateSelection: formatSelection,
language: {
searching: function (params) {
select2_query = params;
return 'Searching…';
}
}
});
}
$(document).ready(function() {
$('testField01').select2();
$('testField02').select2();
initSearch('testField01', 'testField01');
initSearch('testField02', 'testField02');
});
JSON数据样本：
{"total_count":1,"incomplete_results":false,"items":[{"id":1,"testField01":"123456789","testField01":"987654321", "testField03":"ABCDEFGHIJK"}]}
最佳答案
好吧，当您将选项附加到选择字段时，您需要重新初始化select2元素，例如：$element.select2("destroy");
而不是$element.trigger("change");函数中的updateselect2()。
另外，更改select2中的值的正确方法不是通过触发change侦听器，而是通过调用.select2('val', thevalue)，在您的情况下，由于新的选项，该方法不起作用，但请记住这一点。
另一个注意事项：无需在document.ready中初始化select2，因为initSearch会为您完成。
最后说明：示例json错误，您要两次通过testField01
关于javascript - Select2 4.0.3无法使用Ajax调用填充其他select2字段，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39663213/