bootstrap插件：bootstrap-multiselect
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap 多选</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/css/bootstrap-multiselect.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-multiselect.js"></script>
<style type="text/css">
.multiselect-container{ /*下拉框的样式*/
width:195px;
}
.multiselect-container>li>a>label{
line-height: 28px;
font-size: 12px;
}
.multiselect-container>li>a>label>input[type='checkbox'] {
margin-top: 7px;
}
.multiselect-item.multiselect-all.active{
border-bottom:1px solid #ccc !important;
}
/* .multiselect-container.dropdown-menu li{
width:49%;
display: inline-block;
}
.multiselect-container.dropdown-menu li:first-child{
width:100%;
} */
.multiselect.dropdown-toggle.btn.btn-default:link,.multiselect.dropdown-toggle.btn.btn-default:visited,.multiselect.dropdown-toggle.btn.btn-default:focus,.multiselect.dropdown-toggle.btn.btn-default:hover,.multiselect.dropdown-toggle.btn.btn-default:active, .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default{
background: #fff;
outline: none;
border:1px solid #ccc;
box-shadow: none;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
background: #474752;
}
.multiselect-selected-text{
font-size:13px;
font-family: '微软雅黑','宋体';
width:100%;
float: left;
text-align: left;
}
.btn.btn-default{
padding-right:15px;
}
</style>
<script type="text/javascript">
function addOption(){
var data=[{value:'1',label:'一室一厅',selected:true},{value:'2',label:'两室一套'}];
$("select[name='companyId']").multiselect('dataprovider',data);
}
function getValues(){
var selectValueStr = [];
$("#companyId option:selected").each(function () {
selectValueStr.push($(this).val());
});
alert(selectValueStr.join(','));
}
</script>
</head>
<body>
<div style="width: 100%; margin:20px">
<select multiple="multiple" id="companyId" name="companyId" class="companyId" style="width:100%; ">
</select>
</div>
<script type="text/javascript">
$("#companyId").multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
enableCollapsibleOptGroups: true,
buttonWidth:195,
includeSelectAllOption: false,
selectAllText: '全选',//全选的checkbox名称
selectAllNumber: false,//true显示allselect（6）
selectAllName: 'select-all-name',
selectAllValue: 'select-all-value',//可以为strig或者数字
selectAllJustVisible:false,
onDropdownShow: function (event) {
addOption();
}
});
</script>
<button type="button" class="btn btn-default" onclick="getValues()">提交</button>
</body>
</html>
分享到：
相关推荐
在本项目中，我们讨论的是一个基于Bootstrap的多选弹出层插件，旨在为用户提供一个简单且可扩展的选择项展示方案。由于作者并非专职前端开发者，所以可能在样式定制方面需要使用者根据自身需求进行调整。 ### ...
在Bootstrap中实现多选下拉框可以极大提升用户体验，使得用户在有限的空间内可以选择多个选项。以下是如何使用Bootstrap来创建这样一个功能的详细步骤。 首先，确保你已经在你的项目中引入了Bootstrap的相关资源。...
bootstrap的多选下拉框控件，通过对多选框的渲染，在下拉框中实现多选
事先声明下（代码非常杂乱，并未写成插件，方法都是非常low的方法），这个是模拟bootstrap的插件select-picker插件完成的多选下拉树，类似picker中，这个也可以输入进行查询，因为项目特殊需要，里面都是直接id命名...
Bootstrap 4多选下拉框BsMultiSelect插件是一款针对前端开发者的强大工具，它专为Bootstrap 4框架设计，提供了高效且用户友好的多选功能。在网页表单设计中，多选下拉框是一种常见但又重要的交互元素，BsMultiSelect...
Bootstrap是世界上最流行的前端开发框架之一，它提供了一系列预先设计的组件，可以帮助开发者快速构建响应式和用户友好的网页。在Bootstrap中，输入框组（Input Groups）和下拉列表（Dropdowns）是两个常用的功能，...
在本篇文章中，我们将讨论如何使用 Bootstrap Select 实现多选下拉框，并提供相关的代码示例。 首先，为了使用 Bootstrap Select，我们需要引入相关的 CSS 和 JavaScript 文件。这些文件可以从 CDN（内容分发网络）...
Bootstrap 左右多选多Multiselect插件是一种基于流行的前端框架Bootstrap开发的组件，它极大地扩展了Bootstrap原生的下拉选择框功能。这个插件允许用户在两个独立的列表之间进行选择，使得多选操作更加直观和高效，...
这就是“BootStrap 下拉框多选”这个主题所涵盖的知识点。 在HTML中，`<select>`元素用于创建一个下拉列表，通过`<option>`元素定义每个可选项目。要使下拉框支持多选，我们需要在`<select>`标签上添加`multiple`...
在"bootstrap多选实例"中，Bootstrap Select 插件提供了用户友好的多选下拉菜单。这个实例可能包含以下关键知识点： 1. **Bootstrap Select插件安装**：在项目中使用Bootstrap Select，首先需要引入必要的CSS和JS...
给bootstarp下拉多选框进行赋值、清空、清除下拉之前选中的勾---调试页面，发现bootstarp框架多选会自带一个span标签，清空与赋值就是把这个span标签重置，在浏览器调试页面中找到这个span标签，通过class选择器，对...
Bootstrap Multiselect是一款基于Bootstrap框架的插件，用于创建具有多选和单选功能的下拉框，同时提供了条件筛选的功能。这款插件极大地提升了用户在交互界面中的选择体验，尤其适用于需要用户从大量选项中进行选择...
下载后直接用记事本、VS等工具打开，里面有css代码及示例代码
bootstrap 多选功能实现方法 Bootstrap Multiselect 是一个基于 Bootstrap 框架的多选插件，它提供了一个简单易用的方式来实现多选功能。下面将详细介绍 Bootstrap Multiselect 的使用方法和常用方法。 引入 ...
react-bootstrap-combobox· 基于Bootstrap的React组合框组件，具有以下功能： 单选 多项选择 选择处理 搜索项目 滚动条控件 本土化 物品定制 图标定制 搜索自动完成 异步数据加载 可自定义的回调 启用/禁用行为 ...
在本文中，我们将深入探讨如何在AngularJS框架中结合Bootstrap Table实现多选功能，并支持单击行选中。AngularJS是一种强大的前端JavaScript框架，而Bootstrap Table则是一个流行的UI组件库，用于创建美观且响应式的...
总的来说，这个压缩包提供了一整套实现Bootstrap多选下拉框所需的资源，让开发者能够轻松地在项目中添加这种功能，提升用户体验。理解并正确使用这些文件对于任何涉及前端开发，尤其是使用Bootstrap框架的项目都是至...
基于bootstrap实现简单的选择不同相册中的图片，弹出模态框，checkbox多选不同相册中的图片，确定后页面显示选择后的图片，用到的js插件有：icheck、sweetalert、jsrender。
总之，Bootstrap Select是一个强大的下拉选择组件，它结合了Bootstrap的风格和实用功能，适用于创建具有搜索、多选功能的下拉列表，对于提高用户在网页上的操作效率具有显著作用。通过以上介绍，你应该已经对如何...
**jQuery bootstrap-select 下拉多选和搜索 插件详解** 在网页开发中，为了提高用户体验，经常需要使用到下拉列表。然而，传统的HTML `<select>` 标签往往功能有限，无法满足复杂的交互需求，如多选和搜索功能。...