如何从ajax加载默认选择值以进行引导选择

Question

我正在使用https://github.com/truckingsim/Ajax-Bootstrap-Selectboostrap选择插件来选择多选下拉列表。

我能做什么：

• 从ajax请求中搜索丢弃淹没数据
• 选择多个值

缺少什么：

• 默认页面加载不设置DB值。(我有一个id列表，但我不知道如何加载相应id的标签(我可以通过下拉列表加载drop淹没数据搜索。但在编辑页面加载期间，我无法通过ajax调用设置/加载默认的选定值

<link href="css/bootstrap-select.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<script src="js/bootstrap-select.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/ajax-bootstrap-select.js" type="text/javascript"></script>
<div class="form-group row required">
<label for="u-list" class="col-md-6 col-form-label">Label</label>
<div class="col-md-6">
<select class="form-control selectpicker with-ajax" id="u-list" name="u-list" multiple data-live-search="true">
</select>           
</div>
</div>

var list = {
ajax          : {
url     : 'ajaxhandle?action=getApps',
type    : 'GET',
dataType: 'json',
// Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
// automatically replace it with the value of the search query.
data    : {
term: '{{{q}}}'
}
},
locale        : {
emptyTitle: 'Select and Begin Typing'
},
log           : 3,
preprocessData: function (data) {
var i, l = data.length, array = [];
if (l) {
console.log(data[i]);
for (i = 0; i < l; i++) {
array.push($.extend(true, data[i], {
text : data[i].label,
value: data[i].id,
data : {
subtext: data[i].label
}
}));
}
}
// You must always return a valid array when processing data. The
// data argument passed is a clone and cannot be modified directly.
return array;
}
};
$('.selectpicker').selectpicker().filter('.with-ajax').ajaxSelectPicker(list);
$('select').trigger('change');

Answer 1

Ajax-Bootstrap-Select扩展了现有的Bootstrap Select。

Bootstrap Select的文档如下：https://developer.snapappointments.com/bootstrap-select/examples/#customize-菜单

为了显示数据库中的选定值，您必须在<select></select>标签内手动创建optgroup的HTML，并用选定值填充它(value=数据库中的id，以及<option></option>之间的文本(

<select class="selectpicker with-ajax" id="u-list" name="u-list" multiple data-live-search="true">
<optgroup>
<option value="0" class="string" selected="selected">Ana</option>
<option value="2" class="string" selected="selected">Sandra</option>
</optgroup>
</select>

这样，当您加载页面时，默认情况下会选择Ana和Sandra。您需要已经从数据库中加载了ID和标签。

还要检查下面的工作片段：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group row required">
<label for="u-list" class="col-md-6 col-form-label">Label</label>
<div class="col-md-6">
<select class="selectpicker with-ajax" id="u-list" name="u-list" multiple data-live-search="true">
<optgroup>
<option value="0" class="string" selected="selected">Ana</option>
<option value="2" class="string" selected="selected">Sandra</option>
</optgroup>
</select>           
</div>
</div>

我用javascript在localhost上测试了这段代码，并且实时搜索已经开始工作了。当我通过AJAX搜索Maria时，它被添加到当前选择的值中：Ana和Sandra。

Answer 2

文档并没有让它看起来很明显，但我相信要想显示默认选项，只需要将它们添加到select元素中。现在，您的代码显示一个空的select元素。

<select class="form-control selectpicker with-ajax" id="u-list" name="u-list" multiple data-live-search="true">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3" selected>Third</option>
</select>

Answer 3

下面的代码可能会帮助您。

var list = {
ajax          : {
url     : 'ajaxhandle?action=getApps',
type    : 'GET',
dataType: 'json',
// Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
// automatically replace it with the value of the search query.
data    : {
term: '{{{q}}}'
}
},
locale        : {
emptyTitle: 'Select and Begin Typing'
},
log           : 3,
preprocessData: function (data) {
var i, l = data.length, array = [];
if (l) {
console.log(data[i]);
for (i = 0; i < l; i++) {
array.push($.extend(true, data[i], {
text : data[i].label,
value: data[i].id,
data : {
subtext: data[i].label
}
}));
}
}
// You must always return a valid array when processing data. The
// data argument passed is a clone and cannot be modified directly.
return array;
}
};
// Suppose selected value is 1 then pass as below. if multi value then pass [1,2] array in val() funtion 
$('select[name=u-list]').val(1);
$('.selectpicker').selectpicker('refresh')
$('select').trigger('change');

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="form-group row required">
<label for="u-list" class="col-md-6 col-form-label">Label</label>
<div class="col-md-6">
<select class="selectpicker with-ajax" id="u-list" name="u-list" multiple data-live-search="true">
</select>           
</div>
</div>

更多详细参考资料-参考资料1参考文献2参考文献3