Multiselect是基于jQuery插件的,它可以以下拉列表的形式为用户提供选择内容,能进行单选或者多选。它应用的主要步骤如下:

一,引入需要的相关js和css文件

既然是Bootstrap插件,又是基于jQuery的,很明显主要就导入这两个类型的文件

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>

<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

二,创建一个下拉列表

创建的下拉列表格式如下:

<select id="test"  multiple="multiple">

    <option value="1">Cheese</option>

    <option value="2">Tomatoes</option>

    <option value="3">Mozzarella</option>

    <option value="4">Mushrooms</option>

    <option value="5">Pepperoni</option>

    <option value="6">Onions</option>

</select>

三,应用这个插件

<script type="text/javascript">

    $(document).ready(function() {

        $('#test').multiselect();

    });

</script>

得到的结果如下图所示:

这样就可以进行选择了。当然如果去掉属性multiple="multiple",那么 就变成了一个单选的下拉列表

<script type="text/javascript">

    $('#example-single').multiselect();

</script>

<!-- Note the missing multiple attribute! -->

<select id="example-single">

    <option value="1">Option 1</option>

    <option value="2">Option 2</option>

    <option value="3">Option 3</option>

    <option value="4">Option 4</option>

    <option value="5">Option 5</option>

    <option value="6">Option 6</option>

</select>

得到的效果如下:

以上这些是最基本的情况。如果想要深入的知道该如何应用,那么我们就需要知道它的一些相应的参数配置。

四,参数配置说明

1 multiple

当有这个属性的时候,下拉列表可以进行多选,反之,则只能进行单选

2 enableClickableOptGroups

当配置这个属性后,则可以进行分类别或者说分组

只需要配置如下:

<script type="text/javascript">

    $(document).ready(function() {

        $('#example-enableClickableOptGroups').multiselect({

            enableClickableOptGroups: true

        });

    });

</script>

注:example-enableClickableOptGroups表示的是,这个select的id。后面的亦然。

3  enableCollapsibleOptGroups

设置这个属性后,下拉列表就可以进行折叠使用。

需要配置为:

<script type="text/javascript">

    $(document).ready(function() {

        $('#example-enableClickableOptGroups').multiselect({

            enableCollapsibleOptGroups: true

        });

    });

</script>

4 maxHeight 设置最大高度

这个的话,用来设置下拉列表的最大高度,当超过这个最大高度的话,那么就会出现滚动条

5 nonSelectedText 设置选择下拉列表的提示语

当下拉列表没有进行选择的时候,可以使用该属性来设置提示语。

例如上图中,设置提示语为Check an option!

6 numberDisplayed 设置输入框中展示下拉列表中的内容个数

在这个插件里面,默认展示的个数是3

7 enableFiltering 在下拉列表上设置一个搜索框

当设置enableFiltering 为true时,下拉列表会出现一个搜索输入框,能进行内容的搜索

8 includeSelectAllOption 设置全选

9 selectAllName   设置全选名  默认为select-all

8和9一般是联合起来使用,使用效果如下所示:

Bootstrap Multiselect插件使用步骤以及常见参数配置介绍的更多相关文章

  1. Redis入门很简单之三【常见参数配置】

    Redis入门很简单之三[常见参数配置] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存中间件memcached  Redis的一下常见设置都是通过对redis.conf ...

  2. java架构之路-(JVM优化与原理)JVM之G1回收器和常见参数配置

    过去的几天里,我把JVM内部的垃圾回收算法和垃圾回收器.还剩下最后一个G1回收器没有说,我们今天数一下G1回收器和常见的参数配置. G1回收器 G1 (Garbage-First)是一款面向服务器的垃 ...

  3. qt configure参数配置介绍

    ======================================全文是按照./configure -help来翻译的==================================== ...

  4. GCC 常见参数配置

    博客转载自:https://www.cnblogs.com/zhangsir6/articles/2956798.html 简介gcc and g++现在是gnu中最主要和最流行的c & c+ ...

  5. JVM 常见参数配置

    -XX:+PrintGC  每次触发GC的时候打印相关日志 -XX:+PrintGCDetails 每次触发GC的时候更详细的相关日志 -XX:+UseSerialGC 串行回收 -Xms 堆初始值( ...

  6. JVM系列(1)- JVM常见参数及堆内存分配

    常见参数配置 基于JDK1.6 -XX:+PrintGC 每次触发GC的时候打印相关日志 -XX:+UseSerialGC 串行回收模式 -XX:+PrintGCDetails 打印更详细的GC日志 ...

  7. JVM性能优化--JVM参数配置,使用JMeter简单测试配合说明参数调优

    一.JVM参数配置 1.常见参数配置 -XX:+PrintGC 每次触发GC的时候打印相关日志 -XX:+UseSerialGC 串行回收 -XX:+PrintGCDetails 更详细的GC日志 - ...

  8. JVM参数配置及内存调优

    一.JVM常见参数配置 堆内存相关参数 参数名称 含义 默认值   -Xms 初始堆大小 物理内存的1/64(<1GB) 默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40% ...

  9. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

随机推荐

  1. windows服务器解决挖矿程序问题

    前几天发现服务器报警,cpu使用率已达100%,查资料知道正是最近比较流行的挖矿程序在捣鬼.我们使用的是阿里云的服务器,操作系统是windows server.网上有大量的资料讲如何处理,我把自己处理 ...

  2. AI 这么优秀,连我鉴黄师的饭碗都抢了

    色情行业,或许是对信息渠道最敏锐.利用各类信息渠道进行传播最“充分”的“行业”.这些年,社交 App.直播.短视频等新的互联网应用方式,都难逃色情内容的“骚扰”.哪里人多,色情内容就能立刻扑过去,在海 ...

  3. 「造个轮子」——cicada(轻量级 WEB 框架)

    前言 俗话说 「不要重复造轮子」,关于是否有必要不再本次讨论范围. 创建这个项目的主要目的还是提升自己,看看和知名类开源项目的差距以及学习优秀的开源方式. 好了,现在着重来谈谈 cicada 这个项目 ...

  4. Zuul介绍

    1.  Zuul是什么 Zuul是所有从设备和web站点到Netflix流媒体应用程序后端请求的前门.作为一个边缘服务应用程序,Zuul被构建来支持动态路由.监视.弹性和安全性.它还可以根据需要将请求 ...

  5. CentOS7 systemctl tomcat常用配置

    开始配置tomcat 1.环境准备,安装java 在生产环境上,我一般使用oracle java,不使用openjdk,所以先卸载系统自带的openjdk yum remove java 下载orac ...

  6. Kafka监控系统Kafka Eagle剖析

    1.概述 最近有同学留言反馈了使用Kafka监控工具Kafka Eagle的一些问题,这里笔者特意整理了这些问题.并且希望通过这篇博客来解答这些同学的在使用Kafka Eagle的时候遇到的一些困惑, ...

  7. RabbitMQ消息队列(五)-安装amqp扩展并订阅/发布Demo(.Net Core版)

    publish发布消息 新建一个Asp.Net Core控制台项目:PublishDemo 安装Nuget包 Install-Package RabbitMQ.Client 添加命名空间引用 usin ...

  8. ZooKeeper的三种典型应用场景

    引言 ZooKeeper是中典型的pub/sub模式的分布式数据管理与协调框架,开发人员可以使用它进行分布式数据的发布与订阅.另外,其丰富的数据节点类型可以交叉使用,配合Watcher事件通知机制,可 ...

  9. webpack4.0各个击破(9)—— karma篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  10. 常用API。

    object类: 1.equals方法: public boolean equals (Object obj) , 指示其他某个对象是否与此对象“相等” 源码:public boolean equal ...