一、简介
　　select2是Jquery用来代替选择框的一种组件。它让你可以定制下拉框，并且支持搜索、标记，远程数据源，无限滚动和其他更高级的功能。select2的下载地址为：https://select2.github.io/ 。这里使用到的是select2-4.0.0版本。下载该版本后，解压文件，在dist目录下有js与css文件。使用select就需要引用这些的文件。

二、使用
　　1、引入jQuery与select2样式、js文件如下：

  1. <link href="css/select2.min.css" rel="stylesheet" />
  2. <script src="js/jquery.1.11.2.min.js"></script>
  3. <script src="js/select2.min.js"></script>
  4. <script src="js/i18n/zh-CN.js"></script>

　　这里用到的Jquery是1.11.2版本，zh-CN.js为select2本地化的文件。其中select2.min.css、select2.min.js与zh-Cn.js文件都是dist目录下的文件。

　　2、示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>select2-4.0.0 示例</title>
  6.     <link href="css/select2.min.css" rel="stylesheet" />
  7. </head>
  8. <body>
  9.     <div>
  10.         select2: <select id="test1"   style="width: 20%" multiple="multiple">
  11.             <option ></option>
  12.             <option value="2">222222</option>
  13.             <option value="3">33223333</option>
  14.             <option value="4">333333</option>
  15.             <option value="5">223333</option>
  16.             <option value="6">444444</option>
  17.             <option value="7">555555</option>
  18.             <option value="8">666666</option>
  19.             <option value="9">777777</option>
  20.             <option value="10">98888888888888888888888888888888888777777</option>
  21.         </select>
  22.         <button id="clear2"  >清除</button>
  23.         <button id="setValue"  >设置777777</button>
  24.         <button id="getValue"  >获取</button>
  25.         <button id="enable"  >enable</button>
  26.         <button id="disable"  >disable</button>
  27.     </div>
  28.     <div>
  29.         select2: <select id="test2"  style="width: 20%"  /><!-- 多选时加上multiple="multiple" 并在回显时，回传所选的值数组 -->
  30.         <input id="personid" type="hidden" name="personid"  />
  31.     </div>        
  32.  
  33. <script src="js/jquery.1.11.2.min.js"></script>
  34. <script src="js/select2.min.js"></script>
  35. <script src="js/i18n/zh-CN.js"></script>
  36. <script type="text/javascript">
  37. $(document).ready(function(){
  38.     //静态select渲染
  39.     $('#test1').select2({
  40.         placeholder: "请选择",
  41.         language: "zh-CN"
  42.     });
  43.  
  44.     $("#clear2").on("click", function () { //置空
  45.         $("#test1").val(null).trigger("change");
  46.     });
  47.  
  48.     $("#setValue").on("click", function () { //设置某一个值
  49.         $("#test1").val("9").trigger("change");
  50.     });
  51.  
  52.     $("#getValue").on("click", function () { //获取选中值
  53.         alert($("#test1").val());
  54.     });
  55.  
  56.     $("#disable").on("click", function () { //启用
  57.         $("#test1").prop("disabled", true);
  58.     });
  59.  
  60.     $("#enable").on("click", function () { //禁用
  61.         $("#test1").prop("disabled", false);
  62.     });
  63.  
  64.     //select2动态加载数据
  65.     $("#test2").select2({
  66.         placeholder: "请选择",
  67.         language: "zh-CN",
  68.         ajax: {
  69.             url: "${ctx}/person/list.action",
  70.             dataType: 'json',
  71.             delay: 250,
  72.             data: function (term, page) {
  73.                 console.log(term);
  74.                 return {
  75.                     keyword : term,//输入的内容，会发给服务器进行查找
  76.                     //以下两行可以在数据量大的时候用到（当下拉框往下拉的时候会加载下一页），数据量不大的时候，可以直接注释
  77.                     pagesize : 20,//页面大小
  78.                     page : page //当前页
  79.                  };
  80.              },
  81.             results: function (data, page) {
  82. 　　　　　　　　　 var more = (page * ${tpagesize}) < data.total;//判断是还有记录
  83.                 return {
  84.                     results: data.rows , more : more
  85.                 };
  86.             }
  87.           },
  88.         escapeMarkup: function (markup) { return markup; },
  89.         //  minimumInputLength: 1,
  90.         formatResult: function(row) {//选中后select2显示的 内容
  91.             return row.name;
  92.         },
  93.         formatSelection: function(row) { //选择的时候，需要保存选中的id
  94.             $("#personid").val(row.id);
  95.             return row.name;//选择时需要显示的列表内容
  96.         },
  97.     });
  98. });
  99. </script>
  100. </body>
  101. </html>

　　对于动态渲染的下拉框，请求服务器后，服务器返回的数据是json数据。json数据格式如下：

  1. {"total":200,"rows":[{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001",
  2. "name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"}]}

select2使用的更多相关文章

  1. 利用Select2优化@Html.ListBoxFor显示，学会用MultiSelectList

    最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...

  2. ajax获取json数据 for select2

    json数据“a.json” [ { "id": "1", "text": "张三" }, { "id&quo ...

  3. select2 demo

    https://select2.github.io/examples.html 一大堆的坑: 1. 不同版本之间貌似不兼容,对应版本看对应的文档. 2. 4.0.3版本: 1). 自定义渲染的opti ...

  4. 解决select2在bootstrap的modal中默认不显示的问题

    在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...

  5. select2 清空数据

    最近用select2插件,发现用jquery重置不好使,最后搜罗了一把发现下面这个方法可以间接的实现,有空还得看看插件的API $('#integratorId').select2('data', n ...

  6. select2插件不兼容ie7，ie7下样子显示错位问题

    1.源文件(未修改) select2.min.css.select2.min.js 2.ie7下显示样式: 3.ie8下显示样式: 4.经查看发现ie7下对一些属性的解析和ie8不同,需对ie7另作h ...

  7. select2的相关问题

    在弹出框中无法使用select2的问题: 通常情况下,使用select2只需要在加载相关js和css后,添加如下代码即可: $("#selectId").select2(); 但如 ...

  8. bootstrap与Select2使用小结

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

  9. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  10. JS组件系列——Bootstrap Select2组件使用小结

    前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...

随机推荐

  1. [Bootstrap]7天深入Bootstrap(3)CSS布局

    Bootstrap三大核心内容的基础,即基础的CSS 布局语法.其包括基础排版(Typography).代码(Code).表 格(Tables).表单(Forms).按钮(Buttons).图片 (I ...

  2. ASP.NET运行时详解 集成模式和经典模式

    遗留问题 在<ASP.NET运行时详解 生命周期入口分析>中遗留两个问题,包括Application的InitInternal方法执行细节.IIS6和II7经典模式请求管道管理类Appli ...

  3. ASP.NET MVC5利用EF，反向自动生成数据库

    1.在Model类里面,写好相应的属性. using System; using System.Collections.Generic; using System.Linq; using System ...

  4. 计数排序 + 线段树优化 --- Codeforces 558E : A Simple Task

    E. A Simple Task Problem's Link: http://codeforces.com/problemset/problem/558/E Mean: 给定一个字符串,有q次操作, ...

  5. 环信SDK与Apple Watch的结合（2）

    这一篇主要是介绍怎么拖apple watch上的相关页面,附源码EMWatchOCDemo. 需要在工程中的“EMWatchOCDemo WatchKit App”中进行操作,该文件夹的结构如图 Wa ...

  6. Winform开发框架之客户关系管理系统(CRM)的报价单和销售单的处理

    在前面介绍了很多CRM相关的界面和实现思路的随笔文章,本篇继续介绍一下系统中用到的一些经验和技巧片段.本篇随笔主要介绍客户关系管理系统(CRM)的报价单和销售单的处理界面效果,使用列表内置的选择代替弹 ...

  7. 11条javascript知识

    1.局部变量和全局变量 var操作符定义的变量将成为定义该变量作用域中的局部变量.这个局部变量会在函数退出后销毁.不同于其他语言,javaScript不存在块级作用域. 全局变量就是window对象的 ...

  8. jquery实现网页选项卡

    这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击 ...

  9. TreeBuilder科学的树创建器

    public static class TreeBuilder { public static List<dynamic> Build(IEnumerable<dynamic> ...

  10. JPA(5)使用二级缓存

    jpa的缓存分为一级缓存和二级缓存,一级缓存值得是会话级别的,而二级缓存是跨会话级别的. 使用二级缓存,使用到了Ehcache,首先第一步需要在配置文件中配置使用了二级缓存 <shared-ca ...