select2使用

一、简介
　　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使用的更多相关文章

利用Select2优化@Html.ListBoxFor显示，学会用MultiSelectList
最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...
ajax获取json数据 for select2
json数据“a.json” [ { "id": "1", "text": "张三" }, { "id&quo ...
select2 demo
https://select2.github.io/examples.html 一大堆的坑: 1. 不同版本之间貌似不兼容,对应版本看对应的文档. 2. 4.0.3版本: 1). 自定义渲染的opti ...
解决select2在bootstrap的modal中默认不显示的问题
在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...
select2 清空数据
最近用select2插件,发现用jquery重置不好使,最后搜罗了一把发现下面这个方法可以间接的实现,有空还得看看插件的API $('#integratorId').select2('data', n ...
select2插件不兼容ie7，ie7下样子显示错位问题
1.源文件(未修改) select2.min.css.select2.min.js 2.ie7下显示样式: 3.ie8下显示样式: 4.经查看发现ie7下对一些属性的解析和ie8不同,需对ie7另作h ...
select2的相关问题
在弹出框中无法使用select2的问题: 通常情况下,使用select2只需要在加载相关js和css后,添加如下代码即可: $("#selectId").select2(); 但如 ...
bootstrap与Select2使用小结
这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...
解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
JS组件系列——Bootstrap Select2组件使用小结
前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...

随机推荐

2015年百度之星初赛(1) --- F 矩形面积
矩形面积 Problem Description 小度熊有一个桌面,小度熊剪了很多矩形放在桌面上,小度熊想知道能把这些矩形包围起来的面积最小的矩形的面积是多少. Input 第一行一个正整数 T, ...
带复杂表头合并单元格的HtmlTable转换成DataTable并导出Excel
步骤: 一.前台JS取HtmlTable数据,根据设定的分隔符把数据拼接起来  <script type="text/javascript&qu ...
LeetCode1：Two Sum
题目: Given an array of integers, find two numbers such that they add up to a specific target number. ...
第三章--Win32程序的执行单元（部分概念及代码讲解）（上 -- 多线程）
学习<Windows程序设计>记录概念贴士: 1. 线程描述了进程内代码的执行路径. 2. _stdcall是新标准C/C++函数的调用方法.从底层来说,使用这种调用方法参数的进栈顺序和 ...
log4j.xml 配置参数属性level使用心得
jdbc.sqlonly 只显示执行的sql语句.info级才可以显示,debug增加显示java源代码位置. jdbc.sqltiming 显示执行的sql语句以及语句执行时间, ...
从" ThinkPHP 开发规范 "看 PHP 的命名规范和开发建议
稍稍水一篇博客,摘抄自Think PHP 的开发规范,很有引导性,我们可以将这些规范实践到原生 PHP 中. 命名规范使用ThinkPHP开发的过程中应该尽量遵循下列命名规范: 类文件都是以.cla ...
GDB调试器使用总结
概述:GDB是linux下调试程序的神器,做为linux程序员,如果不能熟练的使用GDB进行程序调试,那将是很失败的事情.强大的功能使GDB的使用也变得比较复杂,如果是初学者肯定会比繁杂的命令吓到.下 ...
vh属性-- 一个永远垂直居中的弹出框
下面的demo,无论浏览器大小如何改变,滚动条是否滚动,弹出框永远水平垂直居中 <html> <head> <title></title> </h ...
来自 CORS 预检通道的 CORS 头 'Access-Control-Allow-Headers' 的令牌 'appkey' 无效）。
1.服务端: web.config文件中: <system.webServer> <httpProtocol> <customHeaders> <add na ...
SharePoint 2010 文档管理系列之准备篇
前言:很早自己就想写一个系列的文章,但是不知道写什么,最近在QQ群里,好多人说在做文档管理,其实文档管理也是SharePoint的一个很不错的功能点,自己想了想,也想多学习点东西,所以写这个主题吧,今 ...

select2使用

select2使用的更多相关文章

随机推荐

热门专题