Bootstrap Multiselect 基本使用方法

最新推荐文章于 2025-06-04 15:32:10 发布

HiGaga~

最新推荐文章于 2025-06-04 15:32:10 发布

阅读量2.4w

点赞数 1

分类专栏： Java开发文章标签： bootstrap Multiselect

Java开发专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个基于Bootstrap的多选插件Bootstrap Multiselect，包括如何引入依赖库、创建多选框HTML代码及调用插件的方法。此外还详细列举了可用的参数配置和插件方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对比了不少的多选插件，因为项目基于Boostrap开发，最终选择：Bootstrap Multiselect

源码地址：
https://github.com/davidstutz/bootstrap-multiselect

示例网址：http://davidstutz.github.io/bootstrap-multiselect

使用指南

添加引用

因为该插件基于jQuery和Bootstrap，先引用；然后引用插件所需的js和css文件。

<!-- Include Twitter Bootstrap and jQuery: -->
<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"/>

创建选择Html代码

添加selectHtml代码，记住设置属性multiple="multiple"将其转换成多选。但是不用担心，不设置属性也可以正常使用，主要是为了保持html代码的一致性。

<!-- Build your select: -->
<select id="example-getting-started" 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>

调用插件

接下来只需要调用即可，示例使用默认方法，当然我们还可以设置更多的参数。

<!-- Initialize the plugin: -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-getting-started').multiselect();
    });
</script>

参数设置

multiple
enableHTML
enableClickableOptGroups
enableCollapsibleOptGroups
disableIfEmpty
dropRight
dropUp
maxHeight
disableIfEmpty
disabledText
onChange
onInitialized
onDropdownShow
onDropdownHide
onDropdownShown
onDropdownHidden
buttonClass
inheritClass
buttonContainer
buttonWidth
buttonText
buttonTitle
nonSelectedText 没有选择项时显示的文本
nSelectedText 选择n选项时显示的文本
allSelectedText 选择全部项时显示的文本
numberDisplayed
delimiterText
optionLabel
optionClass
selectedClass
includeSelectAllOption
selectAllJustVisible
selectAllText
selectAllValue
selectAllName
selectAllNumber
onSelectAll
onDeselectAll
enableFiltering
enableCaseInsensitiveFiltering
enableFullValueFiltering
filterBehavior
filterPlaceholder

方法

销毁
.multiselect(‘destroy’)
设置值
.multiselect(‘select’, value)

示例：

$('#example-select').multiselect('select', ['1', '2', '4']);

获取值

var selected = [];
$(‘#Items option:selected’).each(function () {
selected.push($(this).val());
});
启用
.multiselect(‘disable’)
禁用
.multiselect(‘enable’)