Select2 的使用
实现这个下拉列表框
下载这两个官网上的CSS,JS
官网地址
https://select2.org/getting-started/installation
我自己存的高速下载地址
http://ys-c.ys168.com/601902957/mcctijh7N3G5I6G2MP6H/select2.min.css
http://ys-c.ys168.com/601902950/j4K4H6G3L5JM7Hmcctij/select2.min.js
<select class="js-example-data-ajax form-control"
name="states[]" multiple="multiple"
><option value="AL"></option>...
<option value="WY">前端</option></select>
这个就是单纯不需要ajax的列表
$(".js-example-data-ajax").select2({ data: data });//启动select2
这个就是ajax的
$(document).ready(function() { $(".js-example-data-ajax").select2({
ajax: { url : "/topicAjax",//请求的API地址
dataType: 'json',//数据类型
data : function(params){ return {
q : params.term//此处是最终传递给API的参数
}
},
results : function(data){ return data;}//返回的结果 }
});//启动select2
URL请求方式是?q=
原文链接
https://segmentfault.com/a/1190000006792406?_ea=1131053
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组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...
随机推荐
- unity 事件顺序及功能说明
unity3d中所有控制脚本的基类MonoBehaviour有一些虚函数用于绘制中事件的回调,也可以直接理解为事件函数,例如大家都很清楚的Start,Update等函数,以下做个总结. Awake 当 ...
- linux多线程全面解析
引入: 在传统的Unix模型中,当一个进程需要由另一个实体执行某件事时,该进程派生(fork)一个子进程,让子进程去进行处理.Unix下的大多数网络服务器程序都是这么编写的,即父进程接受连 ...
- 微信小程序转支付宝小程序
使用方法: npm install wx-alipay -g wxToalipay --src={{小程序源码目录}} --dest={{支付宝小程序目录,可缺省}} 点击回车后就可将微信小程序转换为 ...
- 类里边的构造函数可以被private修饰,在类的内部创建对象。利用这种特性创建单类模式
- 我所常用的git命令
说明公司向用git来管理项目的代码,我以前只是在eclipse中使用菜单来操作git,现在,学习一下命令,这样也不用安装各种git客户端软件了.git安装在官网上下载git,安装完成之后,在命令行中输 ...
- YARN学习笔记——Overview and Architecture
YARN的简介 什么是YARN MRv1的架构和缺陷 经典MapReduce的局限性 解决可伸缩性问题 YARN的架构 一个可运行任何分布式应用程序的集群 YARN中的应用程序提交 YARN的其他特性 ...
- LeetCode IPO
原题链接在这里:https://leetcode.com/problems/ipo/description/ 题目: Suppose LeetCode will start its IPO soon. ...
- noip积木大赛
先要覆盖一号位置的高度,(现在你的目的只是想要覆盖一号位置). 每次你可以选区间[l,r]高度+1,这个作为一个操作. 为什么不选的范围大一点,让更多的区间增加高度呢. 所以红色的地方是,在我的目的是 ...
- 区域存储网络(SAN)与 网络直接存储(NAS)
随着互联网及网络应用的飞速发展,数据信息存储系统所需处理的数据类型也呈爆炸性增长,这使数据信息存储系统面临前所未有的挑战.附加式网络存储装置(Network Attached Storage,缩写为N ...
- bzoj 4556 字符串 —— 后缀数组+主席树
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4556 就是找一个 rk 在一段区间内的前驱和后继: 由于 LCP 还有区间长度的限制,所以可 ...