Bootstrap Multiselect插件使用步骤以及常见参数配置介绍

摘要:
Multiselect基于jQuery插件。它可以以下拉列表的形式向用户提供选择内容。它可以进行单个或多个选择。--˃Option1Option2Option3˃Option4Option5Option6结果如下:这些是最基本的情况。如果我们想知道如何深入应用它,我们需要知道一些相应的参数配置。它需要配置为:$ready;4maxHeight用于设置下拉列表的最大高度。超过最大高度时,将出现滚动条5onSelectedText。未选择下拉列表时,可以使用此属性设置提示。

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

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

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

<link rel="stylesheet" href="http://t.zoukankan.com/css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="http://t.zoukankan.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://t.zoukankan.com/js/bootstrap.min.js"></script>

<script type="text/javascript" src="http://t.zoukankan.com/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://t.zoukankan.com/css/bootstrap-multiselect.css" type="text/css"/>

二,创建一个下拉列表

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

<select  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>

得到的结果如下图所示:

Bootstrap Multiselect插件使用步骤以及常见参数配置介绍第1张

这样就可以进行选择了。当然如果去掉属性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>

得到的效果如下:

Bootstrap Multiselect插件使用步骤以及常见参数配置介绍第2张

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

四,参数配置说明

1 multiple

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

2 enableClickableOptGroups

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

Bootstrap Multiselect插件使用步骤以及常见参数配置介绍第3张

只需要配置如下:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enableClickableOptGroups').multiselect({
            enableClickableOptGroups: true
        });
    });
</script>

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

3  enableCollapsibleOptGroups

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

Bootstrap Multiselect插件使用步骤以及常见参数配置介绍第4张

需要配置为:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enableClickableOptGroups').multiselect({
            enableCollapsibleOptGroups: true
        });
    });
</script>

4 maxHeight 设置最大高度

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

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

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

Bootstrap Multiselect插件使用步骤以及常见参数配置介绍第5张

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

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

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

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

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

Bootstrap Multiselect插件使用步骤以及常见参数配置介绍第6张

8 includeSelectAllOption 设置全选

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

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

Bootstrap Multiselect插件使用步骤以及常见参数配置介绍第7张




免责声明:文章转载自《Bootstrap Multiselect插件使用步骤以及常见参数配置介绍》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇redis集群搭建及一些问题前端性能优化之uniapp下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

(转)高性能JavaScript:加载和运行(动态加载JS代码)

浏览器是如何加载JS的 当浏览器遇到一个<script>标签时,浏览器首先根据标签src属性下载JavaScript代码,然后运行JavaScript代码,继而继续解析和翻译页面。如果需要加载的js文件很多很大,则会让人感觉页面加载很慢,影响页面的交互。浏览器在遇到<body>之前,不会渲染页面的任何部分,如果此时<head...

三, 用户管理 一

用户概念 一、sys用户和system用户 Oracle安装会自动的生成sys用户和system用户 (1)、sys用户是超级用户,具有最高权限,具有sysdba角色,有create database的权限,该用户默认的密码是change_on_install (2)、system用户是管理操作员,权限也很大。具有sysoper角色,没有create...

js调试工具Console命令详解——转

一、显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &...

select默认下拉箭头改变、option样式清除

谷歌、火狐、ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标; /* --ie清除--*/ select::-ms-expand{ display: none; } /* --火狐、谷歌清除--*/ select{ appearance:none; -moz-appearan...

【PyTorch基础】将pytorch模型转换为script模型

操作步骤: 1. 将PyTorch模型转换为Torch脚本; 1)通过torch.jit.trace转换为torch脚本; 2)通过torch.jit.script转换为torch脚本; 2. 将脚本模型序列化为文件; 3. 在c++中加载脚本模块; 安装使用LibTorch; 4. 在c++中执行脚本模块; code # -*- coding: utf-...

radio 获取选中值

Radio 1.获取选中值,三种方法都可以: 1 2 3 $('input:radio:checked').val(); $("input[type='radio']:checked").val(); $("input[name='rd']:checked").val(); 2.设置第一个Radio为选中值: 1 2 3 $('in...