我在我的页面中使用了AdminLTE的select2。当我在页面中动态创建多个select2多选ajax控件时,控件不起作用(ajax请求不会触发,控制台或网络中没有错误)。
<pre>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/select2/dist/css/select2.min.css">
<script src="https://adminlte.io/themes/AdminLTE/bower_components/select2/dist/js/select2.full.min.js"></script>
<select id="filter_value_1" class="chosen-select form-control
select2 filter_value fil_sel select2-hidden-accessible"></select>
<select id="filter_value_2" class="chosen-select form-control
select2 filter_value fil_sel select2-hidden-accessible"></select>
<select id="filter_value_3" class="chosen-select form-control
select2 filter_value fil_sel select2-hidden-accessible"></select>
</pre>
在没有控制台错误的情况下填充数据时出现问题
答案 0 :(得分:0)
我从这个链接获得了一个解决方案
var sendurl ='http://...';
for(var i=1;i<5;i++){
var sSelect = $('#filter_value_'+i);
$.ajax({
type: 'GET',
dataType: 'json',
url: sendurl
}).then(function (data) {
console.log(data);
// create the option and append to Select2
var option = new Option(data.text, data.id, true, true);
$('.select2s').append(option).trigger('change');
// manually trigger the `select2:select` event
sSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
}
答案 1 :(得分:0)
根据document,您只需要特定格式的数据,
即。 ID 和文字对
实施例
{
"results": [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2"
}
]
}
网址https://api.github.com/orgs/select2/repos
这没有那种格式,所以首先需要对其进行格式化。
我做了一些改变,
我希望这能解决你的问题。
$(document).ready(function(){
$('#filter_value_1').select2({
ajax: {
url: 'https://api.github.com/orgs/select2/repos',
dataType: 'json',
processResults: function (data) {
return {
results: setData(data,'default_branch')
};
}
}
});
function setData(data, text){
for(i =0;i<data.length;i++){
data[i]["text"]=data[i][text];
}
return data;
}
$('#filter_value_2').select2({
ajax: {
url: 'https://api.github.com/orgs/select2/repos',
dataType: 'json',
processResults: function (data) {
return {
results: setData(data,'description')
};
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/select2/dist/css/select2.min.css">
<script src="https://adminlte.io/themes/AdminLTE/bower_components/select2/dist/js/select2.full.min.js"></script>
<select id="filter_value_1" style="width:200px;"></select>
<select id="filter_value_2" style="width:200px;"></select>