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

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

<link href="css/select2.min.css" rel="stylesheet" />

<script src="js/jquery.1.11.2.min.js"></script>

<script src="js/select2.min.js"></script>

<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、示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>select2-4.0.0 示例</title>

    <link href="css/select2.min.css" rel="stylesheet" />

</head>

<body>

    <div>

        select2: <select id="test1"   style="width: 20%" multiple="multiple">

            <option ></option>

            <option value="2">222222</option>

            <option value="3">33223333</option>

            <option value="4">333333</option>

            <option value="5">223333</option>

            <option value="6">444444</option>

            <option value="7">555555</option>

            <option value="8">666666</option>

            <option value="9">777777</option>

            <option value="10">98888888888888888888888888888888888777777</option>

        </select>

        <button id="clear2"  >清除</button>

        <button id="setValue"  >设置777777</button>

        <button id="getValue"  >获取</button>

        <button id="enable"  >enable</button>

        <button id="disable"  >disable</button>

    </div>

    <div>

        select2: <select id="test2"  style="width: 20%"  /><!-- 多选时加上multiple="multiple" 并在回显时，回传所选的值数组 -->

        <input id="personid" type="hidden" name="personid"  />

    </div>        

<script src="js/jquery.1.11.2.min.js"></script>

<script src="js/select2.min.js"></script>

<script src="js/i18n/zh-CN.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    //静态select渲染

    $('#test1').select2({

        placeholder: "请选择",

        language: "zh-CN"

    });

    $("#clear2").on("click", function () { //置空

        $("#test1").val(null).trigger("change");

    });

    $("#setValue").on("click", function () { //设置某一个值

        $("#test1").val("9").trigger("change");

    });

    $("#getValue").on("click", function () { //获取选中值

        alert($("#test1").val());

    });

    $("#disable").on("click", function () { //启用

        $("#test1").prop("disabled", true);

    });

    $("#enable").on("click", function () { //禁用

        $("#test1").prop("disabled", false);

    });

    //select2动态加载数据

    $("#test2").select2({

        placeholder: "请选择",

        language: "zh-CN",

        ajax: {

            url: "${ctx}/person/list.action",

            dataType: 'json',

            delay: 250,

            data: function (term, page) {

                console.log(term);

                return {

                    keyword : term,//输入的内容，会发给服务器进行查找

                    //以下两行可以在数据量大的时候用到（当下拉框往下拉的时候会加载下一页），数据量不大的时候，可以直接注释

                    pagesize : 20,//页面大小

                    page : page //当前页

                 };

             },

            results: function (data, page) {

　　　　　　　　　 var more = (page * ${tpagesize}) < data.total;//判断是还有记录

                return {

                    results: data.rows , more : more

                };

            }

          },

        escapeMarkup: function (markup) { return markup; },

        //  minimumInputLength: 1,

        formatResult: function(row) {//选中后select2显示的 内容

            return row.name;

        },

        formatSelection: function(row) { //选择的时候，需要保存选中的id

            $("#personid").val(row.id);

            return row.name;//选择时需要显示的列表内容

        },

    });

});

</script>

</body>

</html>

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

{"total":200,"rows":[{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001",

"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. Angular系列----AngularJS入门教程00：引导程序（转载）

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  2. Mybatis 中在传参时，${} 和#{} 的区别

    介绍 MyBatis中使用parameterType向SQL语句传参,parameterType后的类型可以是基本类型int,String,HashMap和java自定义类型. 在SQL中引用这些参数 ...

  3. ok6410 android driver(7)

    This article talk about how to test device driver on JNI. There are two ways to test the device driv ...

  4. SQL Server视图复习

    视图的好处: 第一点:使用视图,可以定制用户数据,聚焦特定的数据. 第一点:使用视图,可以定制用户数据,聚焦特定的数据. 在实际过程中,公司有不同角色的工作人员,我们以销售公司为例的话,采购人员,可以 ...

  5. thread_LockSupport

    LockSupport是用来创建锁和其他同步类的基本线程阻塞原语. LockSupport中的park() 和 unpark() 的作用分别是阻塞线程和解除阻塞线程,而且park()和unpark() ...

  6. Linq之group子句

    在Linq查询语句中,group子句主要作用是对查询的结果集进行分组.并返回元素类型为IGrouping<TKey,TElement>的对象序列. 下面我们在代码实例中创建一个GroupQ ...

  7. Try out the latest C++ compiler toolset without waiting for the next update of Visual Studio

    Updated 22/Apr/2016: The NuGet package is now being uploaded daily. The payload doesn’t change every ...

  8. 【Bootstrap基础学习】01 Bootstrap的CSS

    Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN& ...

  9. HDU 1028（母函数）

    Online Judge Online Exercise Online Teaching Online Contests Exercise Author F.A.QHand In HandOnline ...

  10. xshell下载文件到本地/上传文件到服务器

    xshell很好用,然后有时候想在windows和linux上传或下载某个文件,其实有个很简单的方法就是rz,sz首先你的Ubuntu需要安装rz.sz(如果没有安装请执行以下命令,安装完的请跳过.其 ...