jQuery bootstrapSelect 插件

jQuery bootstrapSelect 是一个简单易用且功能强大的下拉列表选择器插件。它基于 Bootstrap 框架，可以让你轻松地自定义下拉列表外观和行为。使用该插件可以让你在网页中轻松地创建各种下拉列表选择器，例如：表单元素、动态数据筛选器等等。

功能特色

• 基于 Bootstrap 框架
• 支持多个选择器
• 可自定义外观
• 支持搜索功能
• 可设置默认值
• 可从远程数据源加载选项
• 支持 AJAX 异步数据加载

安装方法

CDN 引入

<!-- 引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- 引入 bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- 引入 bootstrapSelect -->
<link href="https://cdn.bootcss.com/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

NPM 安装

npm install bootstrap-select

快速上手

基本用法

以下是一个简单的示例：

<!-- HTML -->
<select class="selectpicker">
  <option>苹果</option>
  <option>香蕉</option>
  <option>梨子</option>
</select>

// JavaScript
$('.selectpicker').selectpicker();

自定义样式

你可以根据自己的需要对下拉列表进行各种样式自定义。例如：

<!-- HTML -->
<select class="selectpicker" title="请选择你的国家" data-style="btn-primary">
  <option>美国</option>
  <option>加拿大</option>
  <option>澳大利亚</option>
</select>

// JavaScript
$('.selectpicker').selectpicker();

可选参数

以下是该插件的可选参数：

• actionsBox：是否开启多项选择按钮
• countSelectedText：已选数量时的提示文本
• liveSearch：开启搜索功能
• liveSearchNormalize：搜索结果忽略大小写
• liveSearchPlaceholder：搜索框占位文本
• liveSearchStyle：搜索框样式
• noneSelectedText：未选中任何选项时的提示文本
• selectOnTab：按 tab 键选中当前项
• selectedTextFormat：已选中的选项样式
• showContent：在按钮中显示选中的内容
• showIcon：显示下拉列表图标
• width：设置下拉列表宽度
• actionsBox：是否开启多选框

详细内容请参考官方文档：http://silviomoreto.github.io/bootstrap-select/options/

方法

以下是该插件提供的可调用方法：

• refresh：重新加载插件
• selectAll：选择所有选项
• deselectAll：取消选择所有选项
• val：获取或设置当前选中的值
• selectpicker：初始化插件

详细内容请参考官方文档：http://silviomoreto.github.io/bootstrap-select/methods/

事件

以下是该插件提供的可监听事件：

• show.bs.select：下拉列表显示前触发
• shown.bs.select：下拉列表显示后触发
• hide.bs.select：下拉列表隐藏前触发
• hidden.bs.select：下拉列表隐藏后触发
• changed.bs.select：选项值改变时触发

详细内容请参考官方文档：http://silviomoreto.github.io/bootstrap-select/events/

总结

jQuery bootstrapSelect 插件是一个极其实用且易于使用的下拉列表选择器，具有非常强大的功能和灵活的配置选项。它不仅可以使网页开发更加简单和高效，而且可以让网页的展示更加完美和美观，尤其是对于需要频繁使用表单和选项列表的网页，它更是必不可少的利器。