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的更多相关文章

  1. 使用 Select2 下拉框实现复选

    使用 Select2 下拉框实现复选 <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  2. bootstrap与Select2使用小结

    这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...

  3. jquery.select2 模糊查询

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link re ...

  4. select2美化下拉单

    http://www.51xuediannao.com/js/jquery/select2.html http://www.51xuediannao.com/demo.php

  5. select2清除选择(选择框内的值)

    首先清空option很简单:$("#select2_id").empty();但是这样清除了之后,选中的值仍然在文本框里显示着: 这个功能很小,只是一个函数的问题,之所以写这篇文章 ...

  6. select2,利用ajax高效查询大数据列表(可搜索、可分页)

    二.导入css和js到网站上 1.使用CDN,节省自己网站的流量 ? 1 2 <link href="https://cdnjs.cloudflare.com/ajax/libs/se ...

  7. 前端插件之Select2使用

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...

  8. 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框

    品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...

  9. html select美化模拟jquery插件select2.js

    代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远 ...

随机推荐

  1. C#进阶系列——WebApi 接口参数不再困惑:传参详解

    前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料.如今,使用WebApi也有段时间了,今天就记录下API接口传参的一些方式方法,算是一个笔记,也希望能帮初学者少走弯路.本 ...

  2. 编写轻量ajax组件01-对比webform平台上的各种实现方式

    前言 Asp.net WebForm 和 Asp.net MVC(简称MVC) 都是基于Asp.net的web开发框架,两者有很大的区别,其中一个就是MVC更加注重http本质,而WebForm试图屏 ...

  3. LVS原理详解

    一.集群简介 什么是集群 计算机集群简称集群是一种计算机系统,它通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一台计算机.集群系统中的单个计算 ...

  4. Jenkins + svn + maven 构建持续集成环境搭建

    Jenkins简介 Jenkins是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: ...

  5. ASP.NET-DataList控件-DataList嵌套

    DataList是ASP.NET的数据控件之一,在使用时要对其进行数据绑定.但是使用过程中难免会出现需要根据已绑定表中的某列数据来作进一步的查询和显示,就需要使用DataList嵌套来解决此类问题. ...

  6. odoo8.0 win7 64位 安装配置(补遗)

    各种参考博客资源--http://www.cnblogs.com/yiguxianyun/p/6256641.html 最开始蛋疼问题的是安装各种site-packages! 云盘里面有些win764 ...

  7. 递推 hdu 2064

    z[n] n个盘子从1到3次数 先想2个的时候  1->2 2->3  1->2 3->2 2->1 2->3 1->2 2->3 显然 要先把上面n- ...

  8. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  9. 关于List的ConcurrentModificationException

    对ArrayList的操作我们可以通过索引象来访问,也可以通过Iterator来访问,只要不对ArrayList结构上进行修改都不会造成ConcurrentModificationException, ...

  10. asp.net mvc 权限过滤和单点登录(禁止重复登录)

    1.权限控制使用controller和 action来实现,权限方式有很多种,最近开发项目使用控制控制器方式实现代码如下 /// <summary> /// 用户权限控制 /// < ...