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又远 ...
随机推荐
- C#-WebForm-Request、Response、QueryString、Repeater删
知识点: Request - 获取请求对象 专门用来接传递过来的值 Request["key"](李献策lxc) 1.获取地址栏传递过来的值 get 2.获取表单传递过来的参数值 ...
- 浅谈servlet
刚开始接触servlet的时候,其实不是太理解servlet的,后来经过慢慢摸爬滚打式的的学习,有了一点自己的理解. servlet的产生还要从Java和HTTP说起: Java的servletAPI ...
- Java多线程与并发库高级应用-面试题
第一题:现有的程序代码模拟产生了16个日志对象,并且需要运行16秒才能打印完这些日志,请在程序中增加4个线程去调用parseLog()方法来分头打印这16个日志对象,程序只需要运行4秒即可打印完这些日 ...
- HTML隐藏的方法
display:none; 表单 type="hidden" 宽高设为0 height:0;width:0; 祖先元素隐藏或在页面外 margin Visibility:hidde ...
- 【codeforces 148D】 Bag of mice
http://codeforces.com/problemset/problem/148/D (题目链接) 题意 包中有w个白鼠,b个黑鼠.公主和龙轮流画老鼠,公主先画,谁先画到白鼠谁就赢.龙每画完一 ...
- 【Beta】Scrum09
Info 考试周,暂停工作 时间:2016.12.26 21:35 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.31 21:30 Task Rep ...
- Linux可信计算机制模块详细分析之核心文件分析(8)tpm.c核心代码注释(中)
/*设置TPM命令格式*/ ssize_t tpm_getcap(struct device *dev, __be32 subcap_id, cap_t *cap, const char *desc) ...
- NOIP2016游记
只是游记而已.流水账. Day0:忘了. Day1:看完T1,本以为T2一如既往很简单,结果看了半天完全没有思路.然后看了一眼T3,期望,NOIP什么时候要考期望了,于是接着看T2.一开始我推的限制条 ...
- MSSQLServer中组织或分类表的设计及其递归查询
开篇:项目中用到上下级从属关系的太多太多了,如:组织.分类.行政区域,这里不再一一介绍,遇到这种的如何去进行数据库表的设计及其应用的,个人对往期项目中所涉及到的进行了一些总结. 数据库表设计:表字段一 ...
- js键盘事件和焦点事件
键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...