官方教程

http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html

使用方法:

第一步引用样式以及相关JS

  1. <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
  2. <script type="text/javascript" src="js/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  4.  
  5. <!-- Include the plugin's CSS and JS: -->
  6. <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
  7. <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

第二步 构造Selection(注意 需要设置multiple属性,否则依然是单选模式,multiple="multiple" )

  1. <!-- Build your select: -->
  2. <select class="multiselect" multiple="multiple">
  3. <option value="cheese">Cheese</option>
  4. <option value="tomatoes">Tomatoes</option>
  5. <option value="mozarella">Mozzarella</option>
  6. <option value="mushrooms">Mushrooms</option>
  7. <option value="pepperoni">Pepperoni</option>
  8. <option value="onions">Onions</option>
  9. </select>

第三步 初始化插件:

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $('.multiselect').multiselect();
  4. });
  5. </script>

常用方法:

  1. select

    $('#cid').multiselect('select', arr[i]); 给控件设置选中项

  2. 获取值

$('#cid').val();获取控件所有的选中值

bootstrap-multiselect 多选的更多相关文章

  1. web 前端常用组件【03】Bootstrap Multiselect

    实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/boots ...

  2. Jquery ajax 绑定multiselect多选下拉选项,同时异步执行返回值

    Jquery ajax 绑定multiselect多选下拉选项,同时异步执行获取返回值 function load(mslt_employees,belongto,mark) {//传入$(#ID) ...

  3. bootstrap multiselect的使用 多选下拉菜单

    官网网址: http://davidstutz.de/bootstrap-multiselect/

  4. JS组件系列——两种bootstrap multiselect组件大比拼

    前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...

  5. bootstrap multiselect两大组件

    组件说明以及API 1.第一个组件——multiple-select.这个组件风格简单.文档全.功能强大.但是觉得它选中的效果不太好.关于它的效果展示,我们放在后面. 2.第二个组件——bootstr ...

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

    Multiselect是基于jQuery插件的,它可以以下拉列表的形式为用户提供选择内容,能进行单选或者多选.它应用的主要步骤如下: 一,引入需要的相关js和css文件 既然是Bootstrap插件, ...

  7. jquery.multiselect 多选下拉框实现

    第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的 ...

  8. js:jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Bootstrap Multiselect

    Getting Started Link the Required Files First, the jQuery library needs to be included. Then Twitter ...

  10. bootstrap table 复选框选中后,翻页不影响已选中的复选框

    使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...

随机推荐

  1. SQL SERVER 小语法

    1. 取字段长度:len select * from 表名 where len(expmessage)=1 2.rtrim, ltrim rtrim(ObjectName)

  2. VsCode编写和调试.NET Core

    本文转自:https://www.cnblogs.com/Leo_wl/p/6732242.html 阅读目录 使用VsCode编写和调试.NET Core项目 回到目录 使用VsCode编写和调试. ...

  3. FileInputStream与FileOutputStreawm实现文件的加密与解密

  4. python3调用zabbix api

    前言 今天写了一个zabbix api,这里整理一下,过程中自己也学习了一些东西. 需求 我们需要查一个文件内容如下: cat /ops/flume_hosts node1 node2 需要把这个文件 ...

  5. workman的学习总结

    我们知道php主要是用来做web应用的,而且平时使用的都是都是和其他的web服务器来结合使用,比如和apache,nginx和apache的时候,是作为apache的一个动态模块来加载,和nginx的 ...

  6. 微信小程序scroll-view 横向和纵向scroll-view组件

    scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块 主 ...

  7. Android之ListView,AsyncTask,GridView,CardView,本地数据存储,SQLite数据库

    版权声明:未经博主允许不得转载 补充 补充上一节,使用ListView是用来显示列表项的,使用ListView需要两个xml文件,一个是列表布局,一个是单个列表项的布局.如我们要在要显示系统所有app ...

  8. 《你不知道的javascript》读书笔记2

    概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. 这篇笔记是这本书的下半部分,上半部分请见<你不知道的java ...

  9. Java学习笔记30(集合框架四:List接口)

    List接口继承自Collection接口 具有重要的三大特点: 1.有序集合:存入和取出的顺序一致 2.此接口的用户可以对列表中每个元素插入位置精确的控制:可以通过索引操作 3.可以存储重复元素 L ...

  10. day 75vue 脚手架学习 脚手架的使用

    前情提要: vue 自定化开发工具  (vue-cli的使用) 一:安装脚手架,以及准备 1: 下载地址, https://nodejs.org/en/download/ 2:如果下载成功,在cmd ...