Bootstrap Select2 插件通过 AJAX 获取与显示数据的完整实现
作者:百宝袋时间:2026-10-22 16:44:27浏览:425
本文介绍如何在 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 获取和显示数据的实例分享完毕,希望能为读者提供参考,并感谢大家的支持。
作者最新文章
JS中parseInt与Number转整数的核心区别及适用场景
2026-11-05 17:35:53
定制 Quill.js 主题样式:修改默认 CSS 与添加自定义类名
2026-11-04 11:21:35
混淆JS代码怎么在线反混淆并格式化阅读
2026-11-03 21:46:39
JS在线编辑器代码报错怎么调试?控制台使用技巧
2026-11-03 21:24:56
从 marked.js 旧版本升级到最新版:API 变更与迁移指南
2026-11-03 17:38:17
