select2 demo
https://select2.github.io/examples.html
一大堆的坑:
1. 不同版本之间貌似不兼容,对应版本看对应的文档。
2. 4.0.3版本:
1)。 自定义渲染的option无法选中。谷歌了下,似乎返回的对象必需有 id和text属性, 另外可以加一个属性,指向对象本身。即:
ajax的processResults回调中:
processResults: function (data, params) {
params.page = params.page || 1; return {
results: $.map(data, function (item) {
return {
element: item,
text:item.description,
id: item.model}
})
};
}
2)。不要写错select2函数的参数(层级不要混乱),看demo很容易懵逼。
select2({
minimumInputLength: 2,
tags: [],
ajax: {...},
escapeMarkup: function (markup) { return markup; },
templateResult: formatTemplate,
templateSelection: formatResponseSelection
})
templateResult , 输出结果(单个option的定制化,是一个函数,接受 "results"中的单个元素,输出html的dom元素。
templateSelection, 选中时,默认选中的"results"单个元素的哪个属性的,函数。 3) 默认的输入被作为选项处理了,还没能解决这个问题。TOFIX.
4) 返回空列表时,js不能正常提示结果为空,而是将输入作为一个选项!TOFIX
5) select控件最好不要定义class,特别是bs3的form-control,会使宽度变得极其不可控。
6) select2 过的select的初始化,先初始化,然后触发其change事件才能初始化:http://stackoverflow.com/questions/30316586/select2-4-0-0-initial-value-with-ajax
$(xxx_select).val(xxx_value).trigger("change");
7) allowClear属性(值:true/false)必需配合place和holder属性使用(值:具体的输入提示)。
8) 如果想展开下拉框就有一些选项, 可能你百度谷歌了一大堆都没有解决方案(比如这个:https://github.com/select2/select2/issues/4158) 。 其实解决方案很简单, 个人hack方案是将minimumInputLength设置为0, 即:
select2({
minimumInputLength: 0,//<-----!!!!
tags: [],
ajax: {...},
escapeMarkup: function (markup) { return markup; },
templateResult: formatTemplate,
templateSelection: formatResponseSelection
})
aaarticlea/png;base64,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" alt="" />
select2 demo的更多相关文章
- 使用 Select2 下拉框实现复选
使用 Select2 下拉框实现复选 <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
- bootstrap与Select2使用小结
这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...
- jquery.select2 模糊查询
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link re ...
- select2美化下拉单
http://www.51xuediannao.com/js/jquery/select2.html http://www.51xuediannao.com/demo.php
- select2清除选择(选择框内的值)
首先清空option很简单:$("#select2_id").empty();但是这样清除了之后,选中的值仍然在文本框里显示着: 这个功能很小,只是一个函数的问题,之所以写这篇文章 ...
- select2,利用ajax高效查询大数据列表(可搜索、可分页)
二.导入css和js到网站上 1.使用CDN,节省自己网站的流量 ? 1 2 <link href="https://cdnjs.cloudflare.com/ajax/libs/se ...
- 前端插件之Select2使用
工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...
- 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
- html select美化模拟jquery插件select2.js
代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远 ...
随机推荐
- Java简易日历的实现
import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...
- linux-crontab定时任务
crontab命令常见于Unix和Linux的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于"crontab"文件中,以供之后读取和执行.通常 ...
- 因为多余jar包,所报的错
今天,将项目部署到服务器时,出现了上述的错误.于是就开始找度娘了,找啊找,将项目里面的东西翻来覆去的改,不见效果,还多了些莫名其妙的错,当时就懵逼了.在百度上找到的方法都是说有jar包重复,项目里面的 ...
- BZOJ 3676: [Apio2014]回文串
3676: [Apio2014]回文串 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 2013 Solved: 863[Submit][Status ...
- hdu 4859 海岸线 Bestcoder Round 1
http://acm.hdu.edu.cn/showproblem.php?pid=4859 题目大意: 在一个矩形周围都是海,这个矩形中有陆地,深海和浅海.浅海是可以填成陆地的. 求最多有多少条方格 ...
- 疯狂JAVA16课之对象与内存控制
java内存管理分为两个方面:内存分配和内存回收.这里的内存分配特指创建java对象时JVM为该对象在对内存中所分配的内存空间.内存回收指的是当该java对象失去引用,变成垃圾时,JVM的垃圾回收机制 ...
- php artisan常用方法
https://my.oschina.net/u/1186749/blog/643850
- Linux sudo 命令的应用
.note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...
- bzoj 4326: NOIP2015 运输计划
4326: NOIP2015 运输计划 Time Limit: 30 Sec Memory Limit: 128 MB Description 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个 ...
- python网络编程
Socket是网络编程的一个抽象的概念. 通常我们用一个Socket表示"打开了一个网络链接",而打开一个Socket需要知道目标计算机的IP地址和端口号,再指定协议类型即可. 套 ...