实现这个下拉列表框

下载这两个官网上的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 的使用的更多相关文章

  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. unity 事件顺序及功能说明

    unity3d中所有控制脚本的基类MonoBehaviour有一些虚函数用于绘制中事件的回调,也可以直接理解为事件函数,例如大家都很清楚的Start,Update等函数,以下做个总结. Awake 当 ...

  2. linux多线程全面解析

      引入:     在传统的Unix模型中,当一个进程需要由另一个实体执行某件事时,该进程派生(fork)一个子进程,让子进程去进行处理.Unix下的大多数网络服务器程序都是这么编写的,即父进程接受连 ...

  3. 微信小程序转支付宝小程序

    使用方法: npm install wx-alipay -g wxToalipay --src={{小程序源码目录}} --dest={{支付宝小程序目录,可缺省}} 点击回车后就可将微信小程序转换为 ...

  4. 类里边的构造函数可以被private修饰,在类的内部创建对象。利用这种特性创建单类模式

  5. 我所常用的git命令

    说明公司向用git来管理项目的代码,我以前只是在eclipse中使用菜单来操作git,现在,学习一下命令,这样也不用安装各种git客户端软件了.git安装在官网上下载git,安装完成之后,在命令行中输 ...

  6. YARN学习笔记——Overview and Architecture

    YARN的简介 什么是YARN MRv1的架构和缺陷 经典MapReduce的局限性 解决可伸缩性问题 YARN的架构 一个可运行任何分布式应用程序的集群 YARN中的应用程序提交 YARN的其他特性 ...

  7. LeetCode IPO

    原题链接在这里:https://leetcode.com/problems/ipo/description/ 题目: Suppose LeetCode will start its IPO soon. ...

  8. noip积木大赛

    先要覆盖一号位置的高度,(现在你的目的只是想要覆盖一号位置). 每次你可以选区间[l,r]高度+1,这个作为一个操作. 为什么不选的范围大一点,让更多的区间增加高度呢. 所以红色的地方是,在我的目的是 ...

  9. 区域存储网络(SAN)与 网络直接存储(NAS)

    随着互联网及网络应用的飞速发展,数据信息存储系统所需处理的数据类型也呈爆炸性增长,这使数据信息存储系统面临前所未有的挑战.附加式网络存储装置(Network Attached Storage,缩写为N ...

  10. bzoj 4556 字符串 —— 后缀数组+主席树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4556 就是找一个 rk 在一段区间内的前驱和后继: 由于 LCP 还有区间长度的限制,所以可 ...