本文介绍如何在 Bootstrap 环境下使用 Select2 插件，通过 AJAX 异步从服务端获取数据并渲染为下拉选项。详细解析了前端 select2 初始化配置、processResults 数据处理逻辑，以及后端返回的标准 JSON 格式。特别指出 id 字段不能从 0 开始的技术细节，确保选项正常可选。
Select2 插件 AJAX 数据加载实现
使用 Select2 插件，实现如下所示的下拉选择框效果：
HTML 结构配置
1、HTML 代码部分
<div class="form-group" style='display:none;' id='preParamGroup'>
<label for="inputEmail3" class="col-sm-2 control-label">预定义参数</label>
<div class="col-sm-8">
<select class="js-states form-control" id="preParamDefine" multiple="multiple" style="width: 100%"></select>
</div>
</div>
前端 JavaScript 初始化
2、JavaScript 代码部分
$("#preParamDefine").select2({
//data: data,
placeholder:'请选择',//默认文字提示
tags: true,//允许手动添加
allowClear: true,//允许清空
ajax: {
url: '/jgwork/param_select',
type:'GET',
dataType: 'json',
data: function(){ return {'projectId':$('#projectSel').val()}},
processResults: function (data) {
return {
results: data.result
};
}
}
})
AJAX 数据交互与处理
通过 AJAX 从服务端获取数据，并在 processResults 回调函数中处理返回的数据结构。
服务端数据返回逻辑
3、服务端代码部分
服务端返回的数据格式应如下所示：
data = [
{ 'text': 'enhancement' ,
'children':[
{ 'id': 1, 'text': 'bug','parent':'enhancement' },
{ 'id': 2, 'text': 'duplicate' ,'parent':'enhancement'},
{ 'id': 3, 'text': 'invalid' ,'parent':'enhancement'},
{ 'id': 4, 'text': 'wontfix' ,'parent':'enhancement'}
]
}
]具体代码实现如下：
proId = request.GET.get('projectId','')
paramList = [param.show_table() for param in paramDefine.objects.filter(proid = proId)]
data = []
index = 1
for item in paramList:
childList = []
for i in item['paramValue'].split(','):
childList.append({
'id': index,
'text': i,
'param': item['paramName']
}) #生成children字段列表
index += 1
data.append({
'text': item['paramName'],
'children': childList
})
return JsonResponse({'result':data})
需要注意的是，数据项的 index 字段不能从 0 开始。如果生成的 id 为 0，Select2 会赋予其特殊含义，导致该选项无法被正常选中。
以上关于 Bootstrap Select2 插件通过 AJAX 获取和显示数据的实例分享完毕，希望能为读者提供参考，并感谢大家的支持。