一、简介
　　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入门教程04：迭代器过滤（转载）

    我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...

  2. NPOI根据模板生成chart图表导出Excel

    导入NPOI的全部dll. 因为NPOI的API里面还没有对于Chart图表方面的操作,所以只能根据提示做好的图表作为模板,修改数据源的方法来改变图表. 注意:NPOI要用2003版以下的excel才 ...

  3. Python基础：映射（字典）

    一.概述 映射类型(Mapping Types)是一种关联式的容器类型,它存储了对象与对象之间的映射关系. 字典(dict)是Python中唯一的映射类型,它是存储了一个个 键值对(由 键 映射到 值 ...

  4. 判断s2是否能够被通过s1做循环移位（rotate）得到的字符串是否包含

    问题:给定两个字符串s1和s2,要求判断s2是否能够被通过s1做循环移位(rotate)得到的字符串包含.例如,S1=AABCD和s2=CDAA,返回true:给定s1=ABCD和s2=ACBD,返回 ...

  5. 重新想象 Windows 8 Store Apps (46) - 多线程之线程同步: Lock, Monitor, Interlocked, Mutex, ReaderWriterLock

    [源码下载] 重新想象 Windows 8 Store Apps (46) - 多线程之线程同步: Lock, Monitor, Interlocked, Mutex, ReaderWriterLoc ...

  6. Linux下centos系统安装redis和php-redis

    源地址:http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm  //此为centos 6版本 安装输入 ...

  7. 学习Scala： 初学者应该了解的知识

    Scala开发参照清单 这里列出在开发一个Scala工程中需要参照的资料. 官网网站 http://www.scala-lang.org/ 文档网站 http://docs.scala-lang.or ...

  8. java int转byte和long转byte

    在网络编程中,出于节约带宽或者编码的需要,通常需要以原生方式处理long和int,而不是转换为string. public class ByteOrderUtils { public static b ...

  9. [.NET] SQL数据总笔数查询

    [.NET] SQL数据总笔数查询 程序下载 范例下载:点此下载 原始码下载:点此下载 NuGet封装:点此下载 数据查询 开发系统时,使用C#执行SQL查询指令,就可以从SQL数据库里查询所需数据. ...

  10. C#获取网上图片的宽高代码

    用Visual Studio建立Console应用程序,记得引用程序集System.Drawing; 代码如下: using System;using System.Drawing;using Sys ...