实现这个下拉列表框

下载这两个官网上的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. 用php实现四种常见的排序算法

    几种常见的排序 排序是一个程序员的基本功,对于初级phper,更是可以通过排序算法来锻炼自己的思维能力. 所谓排序,就是对一组数据,按照某个顺序排列的过程.下面就总结四种常用的php排序算法,分别是冒 ...

  2. Go标准容器之List

    简介Go的标准包container中包含了常用的容器类型,包括conatiner/list,container/heap,container/ring.本篇介绍conatiner/list. cona ...

  3. 【ES6】箭头函数

    let getPrices = () => 4.55 console.log(getPrices()) let arr = ['apple', 'banana', 'orange'] arr.f ...

  4. 【后端】Python学习笔记

    主要学习材料:<笨办法学习Python> ,(虫师的博客) 后面根据虫师的Python教程再对Pyhon进行了一次重新学习 ================================ ...

  5. web应用程序安全攻防---sql注入和xss跨站脚本攻击

    kali视频学习请看 http://www.cnblogs.com/lidong20179210/p/8909569.html 博文主要内容包括两种常见的web攻击 sql注入 XSS跨站脚本攻击 代 ...

  6. 洛谷 P1930 亚瑟王的宫殿 Camelot

    传送门 题目大意:棋盘有骑士有王,让所有点跳到一个点,求所有棋子跳的步数和,和最小. 题解:bfs+枚举 王的人生: 1):自己走到聚集点 2):某个骑士来到王这里,两个棋子一起到聚集点 3):王走几 ...

  7. 使用 ip 进行系统网络配置

    检查是否有安装iproute工具 rpm -qa | grep iproute 查看所有可用接口 ip link show 启用或禁用接口 ip link set down eth1 ip link ...

  8. AES前后加密算法代码

    首先下载aes.js加密工具类: 本文采用的是 AES/ECB/PKCS5Padding的加密方式进行加密的: js加密写法如下: <!DOCTYPE html> <html lan ...

  9. @SessionAttributes和@ModelAttribute

    一.@ModelAttribute 在默认情况下,ModelMap 中的属性作用域是 request 级别是,也就是说,当本次请求结束后,ModelMap 中的属性将销毁.如果希望在多个请求中共享 M ...

  10. android httpclient 设置超时

    3.X是这样的 HttpClient httpClient=new DefaultHttpClient();4.3是这样的CloseableHttpClient httpClient = HttpCl ...