我使用Ajax调用一个URL来接收数据，并将其填充到使用Select2和远程数据的select元素中。
当在select中搜索时，远程数据加载得非常好，但是使用下面的代码，它似乎没有在for循环中创建/选择选项。
控制台显示了从Ajax调用返回的正确值，但它只是没有在select元素中选择它
$.ajax({
type: "GET",
url: "/section/tickets?action=get_update_details&seq=" + $(el).attr("id"),
cache: false,
dataType: "json",
success: function(data) {
if(data.emails.to !== "") {
for(var i in data.emails.to) {
console.log(data.emails.to[i]);
var x = new Option(data.emails.to[i], data.emails.to[i], true, true);
$("#contacts_to").append(x).trigger('change');
}
}
}
});
我试着模拟你正在努力实现的目标，你能指出麻烦的部分吗。
null
$(document).ready(function() {
$('.js-example-basic-single').select2();
const data = ['Remote Data1', 'Remote Data2'];
for(var i in data) {
var x = new Option(data[i], data[i], true, true);
$(".js-example-basic-single").append(x).trigger('change');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
没有完整的示例很难调试。 然而，您的代码似乎运行良好。
查看此修改版本:
null
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/todos/1",
cache: false,
dataType: "json",
success: function(data) {
console.log(data);
for (let k in data) {
var x = new Option(data[k], k, true, true);
$("#contacts_to").append(x).trigger('change');
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
<select name="" id="contacts_to"></select>