bootstrap select2插件用ajax来获取和显示数据的实例


Posted in Javascript onAugust 09, 2018

用select2插件,实现以下这个选择框:

bootstrap select2插件用ajax来获取和显示数据的实例

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>

2、js代码

$("#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从服务端获取数据,在processResult里来返回数据

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中id=0有特殊意义

以上这篇bootstrap select2插件用ajax来获取和显示数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 性能优化手册 推荐
Feb 23 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
微信小程序url传参写变量的方法
Aug 09 #Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 #Javascript
koa上传excel文件并解析的实现方法
Aug 09 #Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 #Javascript
vue-cli初始化项目中使用less的方法
Aug 09 #Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 #Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 #Javascript
You might like
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
了解ESlint和其相关操作小结
2018/05/21 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python 自动重连wifi windows的方法
2018/12/18 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python读文件的步骤
2019/10/08 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
python 绘制正态曲线的示例
2020/09/24 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
亲戚结婚的请假条
2014/02/11 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
共产党员公开承诺书
2014/03/25 职场文书
法语专业求职信
2014/07/20 职场文书
法院授权委托书格式
2014/09/28 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
导游带团欢迎词
2015/09/30 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
MySQL的Query Cache图文详解
2021/07/01 MySQL