一、简介
　　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. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  2. VC Windows API获得桌面所有窗口句柄的方法

    VC Windows API应用之GetDesktopWindow ——获得桌面所有窗口句柄的方法 Windows API Windows 这个多作业系统除了协调应用程序的执行.分配内存.管理资源…之 ...

  3. html5 canvas雨点打到窗玻璃动画

    html5 canvas雨点打到窗玻璃动画 HTML5下雨效果 效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: <!doctype htm ...

  4. Android Fragment 基本介绍

    Fragment 源码:http://www.jinhusns.com/Products/Download/?type=xcj Android是在Android 3.0 (API level 11)开 ...

  5. EntityFramework left join

       var result = from u in db.Order                              join n in db.Equipment on u.OrderId  ...

  6. sql添加合计

    在项目中发现有这样的写法 SELECT ZoneID,CountSQAZFZSBJZ3G+CountSQGZJRJZSL3G AS column1FROM G3MulticarrierSiteCove ...

  7. 比较偏门的JVM语言Quercus - PHP on JVM

    其实,我不确定Quercus是否可以被认定为一门JVM语言:其次Quercus这个东东分开源版与商业版,开源版只能解释执行.而商业版能编译成Java字节码. 但我知道国内,阿里巴巴很早就在使用它,当然 ...

  8. fibonacci数列的和取余（2）

    Maybe ACMers of HIT are always fond of fibonacci numbers, because it is so beautiful. Don't you thin ...

  9. android onNewIntent

    在Android应用程序开发的时候,从一个Activity启动另一个Activity并传递一些数据到新的Activity上非常简单,但是当您需要让后台运行的Activity回到前台并传递一些数据可能就 ...

  10. jquery操作radio单选按钮、checked复选框。

    一.radio 取值: $('input[name=radio]:checked').val(); 二.checked 判断checked是否被选中 $("input[type='check ...