最近项目有功能需要使用列表选多个用户,老夫偷懒使用zTree进行了多级checktree实现,不过貌似太丑,虽然对于我这种后端来说无所谓,但强迫症还是让我寻找其他代替控件。

  闲话不说了,先上Select2自己的使用配置。

Html页面代码;

<div class="form-group" style="width: 200px;">
<label for="sel_menu" style="width: 200px;">
<select id="sel_menu" class="js-example-basic-multiple js-states form-control">
</select>
</label>
</div>

js代码;

$("#sel_menu").select2({
placeholder: "请选择",
language: "zh-CN",
maximumSelectionLength: 50, //最多能够选择的个数
multiple: true,
ajax: {
url: "/my/search_users",
dataType: 'json',
delay: 1000,
data: function (params) {
return {
search_name: params.term
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
},
initSelection: function (element, callback) {
callback([{ id: 1, text: 'Text' },{ id: 2, text: '测试2'}]);
}
});

个人使用过程中感觉最方便的还是initSelection设置初始选择值,O(∩_∩)O,其他的具体配置解释就不说了,google、baidu一大堆。

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. requerjs 合并 优化配置

    /* * This is an example build file that demonstrates how to use the build system for * require.js. * ...

  2. tornado 学习笔记10 Web应用中模板(Template)的工作流程分析

             第8,9节中,我们分析Tornado模板系统的语法.使用以及源代码中涉及到的相关类,而且对相关的源代码进行了分析.那么,在一个真正的Web应用程序中,模板到底是怎样使用?怎样被渲染? ...

  3. ZeroMQ接口函数之 :zmq_strerror - 获取ZMQ错误描述字符串

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_strerror zmq_strerror(3) ØMQ Manual - ØMQ/4.1.0 Name zmq_ ...

  4. Ubuntu不显示壁纸,桌面右键无反应解决

    用ubuntu tweak调整ubuntu的桌面图标显示,导致桌面无法显示壁纸,桌面点击右键无发应。 解决办法:Ubuntu Tweak中“调整”选项卡-》”显示桌面图标“的选项一定要打开,处于ON状 ...

  5. SQL查询到的数据放到DataSet中

    public DataTable GetTable(string Id) { StringBuilder strSql = new StringBuilder(); DataSet ds = new ...

  6. Windows 7 IE主页被篡改,如何修复?

    有时我们的电脑会因为病毒的入侵,使得IE主页被篡改,然后就会被没底线的广告包围,有时用杀毒软件也不修复,那么此时应该怎么修复呢?其实很简单,只需几步,就可以让您的电脑重新清净下来. 第一步 点击“开始 ...

  7. 快速理解几种常用的RAID磁盘阵列级别

    我发现周围不少人在学习和理解RAID磁盘阵列的原理时,找了很多专业的资料来看,但是因为动手的机会比较少,因此看完以后还是似懂非懂,真正遇到实际的方案设计的时候,还是拿不定主意. 因此,我结合自己在过去 ...

  8. [java]删除数组中的某一个元素

    package org.company.project.test; import java.util.Arrays; import java.util.Scanner; public class Ar ...

  9. CDN服务技术架构图

    前言 在博文中 解读大型网站的演变过程  浅谈 举家搬迁静态文件到CDN 博文中都有涉及CDN,这次我们来详细讲解下CDN的架构 简介 CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器 ...

  10. SQL TOP 子句、SQL LIKE 操作符、SQL 通配符

    TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. 注释:并非所有的数据库系统都支持 TOP 子句. SQL Server 的语法: S ...