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又远 ...
随机推荐
- 编写轻量ajax组件02-AjaxPro浅析
前言 上一篇介绍了在webform平台实现ajax的一些方式,并且实现一个基类.这一篇我们来看一个开源的组件:ajaxpro.虽然这是一个比较老的组件,不过实现思想和源码还是值得我们学习的.通过上一篇 ...
- 基于modelsim-SE的简单仿真流程—下
基于modelsim-SE的简单仿真流程—下 编译 在 WorkSpace 窗口的 counter_tst.v上点击右键,如果选择Compile selected 则编译选中的文件,Compile A ...
- JaveScript-解决表格使用滚动条时冻结表头栏问题
解决方法: //设置表格表头里的th==表格内容里的td function ThEqualTd(thId, tdId) { var tdNum = document.getElementById(td ...
- IOS跑马灯效果,实现文字水平无间断滚动
ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer ...
- secureCRT
配色方案 1
- windows server 2008 各版本号下载地址(微软官网)
前言: 微软官网上下载系统的镜像文件要远比百度网盘下载起来得更快. Windows Server 2008 32-bit Standard(标准版)
- 个人作业-Week2
第一部分 调研, 评测 运行平台 win 8 软件版本:微软必应词典桌面版 3.5.2 BUG标题:必应背单词无法发音 BUG详细描述:如图,左边为必应词典该单词的搜索,可以发音,而右边必应背单词中 ...
- css3 背景渐变
本来想先瞎扯些什么,然后又不知道讲什么的好,那就直接进入正题吧. 参考资料: Using CSS gradients (以及该页面内的大部分链接页面的资料) 首先区分下,平常给的纯色backgrou ...
- 如何生成每秒百万级别的 HTTP 请求?
第一篇:<如何生成每秒百万级别的 HTTP 请求?> 第二篇:<为最佳性能调优 Nginx> 第三篇:<用 LVS 搭建一个负载均衡集群> 本文是构建能够每秒处理 ...
- 解决SmartGit序列号问题
SmartGit过了30天试用期之后,就需要用户输入序列号才能继续使用,有一个办法可以跳过输入序列号. 一.windows+R 输入:%APPDATA%\syntevo\SmartGit 二.打开7 ...