Bootstrap多选组件对比：multiple-select与bootstrap-multiselect用法详解

作者：工具松鼠时间：2026-10-29 20:55:18浏览：364

本文对比了Bootstrap环境下两款主流多选组件multiple-select与bootstrap-multiselect。详细解析了multiple-select的浏览器兼容性、初始化配置、分组、单选及筛选功能，并提供了bootstrap-multiselect的基础使用示例。两者均依赖Bootstrap框架，开发者可根据界面效果偏好选择合适组件。

Bootstrap多选组件对比概述

本文介绍两款样式与功能相近的Bootstrap多选组件，并详细演示它们的具体使用方法。

组件说明与API概览

一、组件说明以及API 1、第一个组件——multiple-select。该组件设计风格简洁，文档完善且功能丰富。不过，其选中状态的视觉反馈效果可能不如预期。具体效果展示将在后文呈现。

2、第二个组件——bootstrap-multiselect。该组件的外观风格与前者高度相似，且同样拥有较为全面的文档支持。

Multiple-select组件详解

二、Multiple-select组件 1、组件说明该组件支持的浏览器版本要求如下：

IE 7+
Chrome 8+
Firefox 10+
Safari 3+
Opera 10.6+

总体而言，主流浏览器均能良好支持该组件。

2、效果预览（1）原始的MultiSelect

Bootstrap多选组件对比概述

（2）初始化的Multiple Select

Bootstrap多选组件对比概述

（3）设置选中和禁用

Bootstrap多选组件对比概述

（4）设置分组

Bootstrap多选组件对比概述

（5）设置未选中的初始值：请选择

Bootstrap多选组件对比概述

（6）初始化成单选

Bootstrap多选组件对比概述

（7）设置组件的筛选功能

Bootstrap多选组件对比概述

3、代码示例作为基于Bootstrap的组件，使用时必须引入Bootstrap相关资源。以下是需要引用的JavaScript文件列表：


 @*Jquery*@
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>

 @*bootstrap*@
 <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 @*multiple-select*@
 <script src="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.js"></script>
 <link href="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.css" rel="stylesheet" />

 @*页面js*@
 <script src="~/Scripts/Home/Index_wenzhixin.js"></script>

（1）原始的初始化


<label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
    <option value="0">未排产</option>
    <option value="5">已排产</option>
    <option value="10">已锁定</option>
    <option value="25">在制</option>
    <option value="20">订单提交</option>
    <option value="30">订单删除</option>
    <option value="50">订单报废</option>
    </select>
   </div>


$(function () {
 $('#sel_search_orderstatus').multipleSelect();
})

（2）设置选中和禁用


<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
    ......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus2').multipleSelect();
})

（3）设置分组和初始值


<label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
    <optgroup label="未上线">
     <option value="0">未排产</option>
    </optgroup>
    <optgroup label="已上线">
     <option value="5">已排产</option>
     <option value="10">已锁定</option>
     <option value="25">在制</option>
     <option value="20">订单提交</option>
    </optgroup>
    <optgroup label="异常">
     <option value="30">订单删除</option>
     <option value="50">订单报废</option>
    </optgroup>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus3').multipleSelect({
 placeholder: "请选择"
 });
})

（4）单选


<label class="control-label col-xs-1" for="sel_search_orderstatus4">单选</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus4" style="width:150px" multiple="multiple">
    .......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus4').multipleSelect({
 placeholder: "请选择",
 single: true
 });
})

（5）筛选


<label class="control-label col-xs-1" for="sel_search_orderstatus5">筛选</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple">
    ......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus5').multipleSelect({
 placeholder: "请选择",
 filter: true
 });
})

（6）如果希望移除multiple select默认的初始占位文本，可在初始化时通过配置参数进行设置。以下是源码中定义的默认参数列表。

Bootstrap多选组件对比概述

Bootstrap-multiselect组件示例

三、Bootstrap-multiselect组件 1、代码示例其初始化流程与上述组件类似，首先需引入必要的资源文件。


<script src="~/Scripts/jquery-1.10.2.min.js"></script>

 <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 <script src="~/Content/multiselect_davidstutz/js/bootstrap-multiselect.js"></script>
 <link href="~/Content/multiselect_davidstutz/css/bootstrap-multiselect.css" rel="stylesheet" />

 <script src="~/Scripts/Home/Index_davidstutz.js"></script>

（1）最原始的初始化


 <label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
    <option value="0">未排产</option>
    <option value="5">已排产</option>
    <option value="10">已锁定</option>
    <option value="25">在制</option>
    <option value="20">订单提交</option>
    <option value="30">订单删除</option>
    <option value="50">订单报废</option>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus').multiselect();
});

（2）设置选中和禁用


<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
    <option value="0">未排产</option>
    <option value="5" selected="selected">已排产</option>
    <option value="10" selected="selected">已锁定</option>
    <option value="25" disabled="disabled">在制</option>
    <option value="20" disabled="disabled">订单提交</option>
    <option value="30" disabled="disabled" selected="selected">订单删除</option>
    <option value="50">订单报废</option>
    </select>
   </div>

（3）分组


<label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
    <optgroup label="未上线">
     <option value="0">未排产</option>
    </optgroup>
    <optgroup label="已上线">
     <option value="5">已排产</option>
     <option value="10" selected="selected">已锁定</option>
     <option value="25" disabled="disabled">在制</option>
     <option value="20">订单提交</option>
    </optgroup>
    <optgroup label="异常">
     <option value="30">订单删除</option>
     <option value="50">订单报废</option>
    </optgroup>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus3').multiselect({
 enableCollapsibleOptGroups: true
 });
});

其他效果的代码实现较为简单，此处不再逐一展示，参考官方文档即可掌握。

若需进一步深入学习，可点击相关链接查看，此外还推荐两个精彩专题：Bootstrap学习教程 Bootstrap实战教程

以上展示了两种多选组件的效果及基础代码示例。至于哪款更优，取决于个人使用感受。两者使用门槛均较低，功能大体相似，希望本文能对各位的学习有所帮助。

作者最新文章

WebStorm内置JS代码格式化功能怎么用

2026-11-05 10:10:47

在线JS代码格式化与混淆压缩工具推荐及使用指南

2026-11-03 20:31:53

CodePen、JSFiddle与RunJS对比：哪款在线JavaScript编辑器更好用

2026-11-03 18:52:45

无需安装环境，5款主流JavaScript在线运行工具推荐

2026-11-03 18:23:26

JS怎么将地址栏查询字符串转换为JSON对象

2026-11-03 18:10:29