基于Bootstrap 4的select下拉多选复选框插件

最新推荐文章于 2026-04-27 02:02:52 发布

原创最新推荐文章于 2026-04-27 02:02:52 发布 · 6.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个基于Bootstrap 4框架的多选下拉插件，将多选列表转换为带复选框的易用下拉列表。用户可通过单击复选框进行选择，并提供清除选项功能。该插件遵循Apache 2许可证，使用步骤包括安装jQuery和Bootstrap 4库，加载jQuery BsMultiSelect脚本，并在多选列表上应用该函数。

一个多选插件基于 Bootstrap 4框架，将多选列表转换为易于使用的带有复选框的下拉列表。

您可以通过单击复选框从下拉列表中选择一个或多个选项。要清除选择，只需单击x所选选项内的图标，就像输入标签一样。

根据APACHE 2获得许可。

>>>>>>点击下载

如何使用它：

1.要使用该插件，请确保安装了jQuery库和Bootstrap 4框架。

<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<!-- jQuery & Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

2.在jQuery之后加载jQuery BsMultiSelect插件的脚本。

<script src="dist/js/BsMultiSelect.js"></script>

3.只需dashboardCodeBsMultiSelect在多选列表上调用该函数，插件将完成剩下的工作。

<select name="states" id="example" class="form-control"  multiple="multiple" style="display: none;">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option selected value="CA">California</option>
  ...
</select>

4.所有默认选项以自定义插件。

$("select").bsMultiSelect({
  items: [], // an array of items for dynamic rendering
  defaults: [], 
  selectedPanelMinHeight: "calc(2.25rem + 2px)",
  selectedPanelReadonlyBackgroundColor: "#e9ecef",
  selectedPanelValidBoxShadow: " 0 0 0 0.2rem rgba(40, 167, 69, 0.25)",
  selectedPanelInvalidBoxShadow: "0 0 0 0.2rem rgba(220, 53, 69, 0.25)",
  filterInputColor: "#495057",
  containerClass: "dashboardcode-bsmultiselect",
  dropDown<a href="https://www.jqueryscript.net/menu/">Menu</a>Class: "dropdown-menu",
  dropDownItemClass: "px-2",
  selectedPanelClass: "form-control btn border",
  selectedPanelStyle: {
    "min-height": "calc(2.25rem + 2px)"
  },
  selectedPanelStyleSys: {
    "cursor": "text",
    "display": "flex",
    "flex-wrap": "wrap",
    "align-items": "center",
    "margin-bottom": "0px"
  },
  selectedPanelReadonlyStyle: {
    "background-color": "#e9ecef"
  },
  selectedItemClass: "badge",
  selectedItemStyle: {
    "padding-left": "0px"
  },
  selectedItemStyleSys: {
    "display": "flex",
    "align-items": "center"
  },
  removeSelectedItemButtonClass: "close",
  removeSelectedItemButtonStyle: {
    "font-size": "100%"
  },
  filterInputItemClass: "",
  filterInputItemStyle: {},
  filterInputItemStyleSys: {
    "display": "block"
  },
  filterInputClass: "",
  filterInputStyle: {
    "color": "#495057"
  },
  filterInputStyleSys: {
    "width": "2ch",
    "border": "0",
    "padding": "0",
    "outline": "none"
  }
});