官方教程

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

使用方法:

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

<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> <!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

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

<!-- Build your select: -->
<select class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>

第三步 初始化插件:

<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect();
});
</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. ABP框架系列之十六:(Dapper-Integration-Dapper集成)

    Introduction Dapper is an object-relational mapper (ORM) for .NET. Abp.Dapper package simply integra ...

  2. hdu 1325 && poj 1308 Is It A Tree?(并查集)

    Description A tree is a well-known data structure that is either empty (null, void, nothing) or is a ...

  3. 【转】B树、B+树、B*树

    出处:http://blog.csdn.net/v_JULY_v 1.前言: 动态查找树主要有:二叉查找树(Binary Search Tree),平衡二叉查找树(Balanced Binary Se ...

  4. hive 命令行传入参数

    azkban实现任务重跑 我们执行sql的方式是将hql文件上传到服务器本地.然后执行shell命令 hive " -f ./test_scheduler.hql 注:hive -e 是执行 ...

  5. day15_雷神_前端03

    # 前端 day03 内容回顾 javascript: 1.ECMAScript5.0 es6(阮一峰) es7 es8 (1)声明变量 var let (2)内置函数 Date Math.rando ...

  6. WHU1124 Football Match

    http://acm.whu.edu.cn/learn/problem/detail?problem_id=1124 题目大意:有N支球队,你们是第N支.每个队伍已经有一些分数了,接下来还有M场比赛. ...

  7. vsftpd3.0.3配置

    2019.2.18更新 证实可用!!! 原文: 这两天测试在Ubuntu18.04上搭建一个ftp服务器,搜了一下大家都在用vsftpd,于是根据这个大佬的基础教程搭了一个,搭完一切正常,在windo ...

  8. Liferay7 BPM门户开发之21: 理解消息总线(Message Bus)体系

    Liferay Message Bus提供了松耦合的消息发送接收机制(生产和消费的设计模式),用于本地服务,不支持远程服务,支持集群. 主要用途: 两个或多个插件之间的通讯. 在事件中发送搜索索引,比 ...

  9. 项目初始化以后出现:Unable to load script from assets 'index.android.bundle

    Mac中真机测试React Native project时出现Unable to load script from assets 'index.android.bundle' 2018年01月21日 ...

  10. python基础学习笔记 - 备忘

    基础中的基础 Python标识符 命名规则: Python标识符区分大小写. 可以包括英文.数字以及下划线,但不能以数字开头. 以下划线开头的标识符是有特殊意义的: a)         以单下划线开 ...