# @crestapps/bootstrap-select 中文文档

规范地址：https://npmcn.com/package/%40crestapps/bootstrap-select/

版本：1\.2\.6
npm 元数据更新时间：2026-10-04T20:40:30.328Z
中文译文更新时间：2026-11-11T00:33:37.625Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40crestapps/bootstrap-select
原文对照：https://npmcn.com/package/%40crestapps/bootstrap-select/?lang=original
项目主页：https://github.com/CrestApps/bootstrap-select
源码仓库：https://github.com/CrestApps/bootstrap-select

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.1 MB，238 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- Node.js 要求：\>=20\.19\.0
- 运行依赖：0 个
- peer 依赖：bootstrap \>=5\.0\.0
- 首次发布：2026-06-14T17:59:01.322Z
- 最新版本发布：2026-10-04T20:40:29.971Z
- 近 30 天下载量：3079（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

一个无依赖性的,香草JavaScript插件,将所选择的元素带入了21世纪,带有直观多选,搜索,以及更多. 支持"靴子"5+. 从快速任命/短跑选取出jQuery和bootstrap 3/4 supp

## 安装

```sh
npm install @crestapps/bootstrap-select
```

也可以使用：`pnpm add @crestapps/bootstrap-select`、`yarn add @crestapps/bootstrap-select`、`bun add @crestapps/bootstrap-select`

## README

# 选择拖带 (CrestApps分叉) (英语)

**一个无依赖性,香草JavaScript插件,将所选择的元素带入21世纪,带有直观多选,搜索,以及更多——为Bootstrap 5+.**

 [![License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/CrestApps/bootstrap-select/blob/main/LICENSE)[![npm version](https://img.shields.io/npm/v/%40crestapps%2Fbootstrap-select.svg) ](https://www.npmjs.com/package/@crestapps/bootstrap-select)[![Documentation](https://img.shields.io/badge/docs-bootstrap--select.crestapps.com-0a7bbb.svg)](https://bootstrap-select.crestapps.com/)

## 关于这个叉子

这个项目是原作的叉子 [快速任命/短跑选择](https://github.com/snapappointments/bootstrap-select)。 。 。 .

原画 `bootstrap-select` 是一个出色的,经过战斗测试的插件,但它 取决于 **查询** 并且有一段时间没有看到积极维修。 因为 现代 Bootstrap(v5+) 放弃了对jQuery的依赖,许多项目都是 完全远离J查询 我们决定用 以下目标:

-   **完全删除 j 查询依赖** - 图书馆现在写在 平地、香草爪哇脚本和船舶 **无运行时间依赖关系** (其他职等) 比靴子本身.
-   **支持 Bootstrap 5 并仅支持后期** 更古老的靴子和查问 兼容性路径故意超出范围.
-   **船舶现代分销格式** 一揽子措施包括一等无害环境管理, CommunityJS,和浏览器-Global UMD从同源代码构建.
-   **使用现代建筑管道** - 叉子不再依赖Grut或Less; 建筑与Rollup、Sass和目前的文件/工具堆一起生产.
-   保持选择增强功能的设置,同时优先考虑一个现代的,小的, 仅转发 API.

## 所需资源

-   **鞋带 5+** (CSS和JS,包括其捆绑的波普).

## 快开始

安装方式 [无](https://www.npmjs.com/package/@crestapps/bootstrap-select)数字 :

```sh
npm install @crestapps/bootstrap-select bootstrap
```

装上"靴子"5,然后"靴子"选择的CSS和JS. **装入选择的靴子 在 Bootstrap 的 Java 脚本之后** 当使用浏览器-全局构建时.

```html
<!-- Bootstrap 5 (includes Popper) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- bootstrap-select -->
<link rel="stylesheet" href="dist/css/bootstrap-select.min.css">
<script src="dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) translation files -->
<script src="dist/js/i18n/defaults-*.min.js"></script>
```

## 使用 CDN 架构

软件包发布到 npm后,也可以通过 (原始内容存档于2018-09-21). jsDelivr. 在生产中优先选择清晰的软件包版本:

```html
<!-- Bootstrap 5 (includes Popper) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

<!-- @crestapps/bootstrap-select from jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@crestapps/bootstrap-select@1.2.3/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/@crestapps/bootstrap-select@1.2.3/dist/js/bootstrap-select.min.js"></script>
```

您可以替换 `@1.2.3` 您想要消费的版本。 期间 发展, `@latest` 也行,但固定的版本比较安全 部署.

## 软件包格式

软件包现在从同一处装入了三款一等JavaScript输入样式 源代码 :

| 样式 | 软件包条目 | 直接文件 | 使用时间 |
| --- | --- | --- | --- |
| 无害环境管理 | `import Selectpicker from '@crestapps/bootstrap-select'` | `dist/js/bootstrap-select.esm.mjs` | 您使用本地模块或更喜欢无害环境管理的捆绑器 |
| 常见JS | `require('@crestapps/bootstrap-select')` | `dist/js/bootstrap-select.cjs` | 您使用捆绑器或工具链, 仍会消耗普通JS |
| 浏览器 Global / UMD | 无 | `dist/js/bootstrap-select.js` 或者说 `.min.js` | 您直接从一个插件装入 `<script>` 标记或CDN |

**重要内容:** 选择的靴子仍然是浏览器插件 。 无害环境管理 普通JS 构建用于浏览器捆绑或类似浏览器的运行时间 DOM,不只服务器的Node.js执行.

### 无害环境管理

使用软件包 `import` 条目或直接 `.mjs` 文件 :

```js
import 'bootstrap/dist/css/bootstrap.min.css';
import '@crestapps/bootstrap-select/dist/css/bootstrap-select.css';
import Selectpicker, { Selectpicker as NamedSelectpicker } from '@crestapps/bootstrap-select';

const picker = new Selectpicker('#my-select', {
  liveSearch: true
});

console.log(Selectpicker === NamedSelectpicker); // true
```

无害环境管理的构建以模块为范围;确实如此 **没有** 添加 `window.Selectpicker`。 。 。 . 如果您喜欢直接导入文件, 请使用 `@crestapps/bootstrap-select/dist/js/bootstrap-select.esm.mjs`。 。 。 .

### 常见JS

使用软件包 `require()` 条目或直接 `.cjs` 文件 :

```js
require('bootstrap');
require('@crestapps/bootstrap-select/dist/css/bootstrap-select.css');

const Selectpicker = require('@crestapps/bootstrap-select');
// or: const { Selectpicker } = require('@crestapps/bootstrap-select');

const picker = new Selectpicker('#my-select', {
  liveSearch: true
});
```

通用JS条目导出该类为:

-   `module.exports = Selectpicker`
-   `module.exports.Selectpicker = Selectpicker`
-   `module.exports.default = Selectpicker`

与无害环境管理建设一样,共同JS构建的模块有范围,并且确实 **没有** 添加 `window.Selectpicker`。 。 。 . 如果您喜欢直接文件需要, 请使用 `@crestapps/bootstrap-select/dist/js/bootstrap-select.cjs`。 。 。 .

### 浏览器 Global / UMD

装入时 `<script>` 标签, UMD 架构显示一个全局 `window.Selectpicker` 编号 : `Selectpicker`数字 :

```html
<!-- Bootstrap 5 (includes Popper) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

<!-- @crestapps/bootstrap-select from jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@crestapps/bootstrap-select@1.2.3/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/@crestapps/bootstrap-select@1.2.3/dist/js/bootstrap-select.min.js"></script>

<script>
  const picker = new Selectpicker('#my-select', {
    liveSearch: true
  });
</script>
```

## 使用量

### 通过 `selectpicker` 类(自动)

添加数据 `selectpicker` 课到您的 `<select>` 要素。 他们是 dOM 准备好后自动初始化——不需要JavaScript.

```html
<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>
```

现有的靴子陷阱选择使用标记 `title="..."` 占位符或 `data-width="fit"` 还支持:

```html
<select class="selectpicker" title="Content Type" data-width="fit">
  <option>Article</option>
  <option>Blog Post</option>
</select>
```

#### 选择指标

对于单项选择, 使用 `show-tick` 默认检查标记,或设置 `data-selection-indicator="checkbox"` 制作无线电式指标 自动。 在多选题上, `data-selection-indicator="checkbox"` 制作一个 复选框列.

```html
<select class="selectpicker show-tick">
  <option>Article</option>
  <option selected>Blog Post</option>
</select>

<select class="selectpicker" data-selection-indicator="checkbox">
  <option>Article</option>
  <option selected>Blog Post</option>
</select>

<select class="selectpicker" multiple data-selection-indicator="checkbox">
  <option selected>Bootstrap 5</option>
  <option>Vue</option>
</select>
```

### Via Java 脚本

初始化实例 `Selectpicker` 从您所选模块中选取的课 样式。 您可以通过元素或 CSS 选择字符串 :

```js
// Initialize a single select
const picker = new Selectpicker('#my-select', {
  liveSearch: true,
  size: 8
});

// Or reuse an existing instance / create one if needed
const picker2 = Selectpicker.getOrCreateInstance(document.querySelector('#my-select'));
```

要同时初始化几个元素, 请绕过它们 :

```js
document.querySelectorAll('.my-select').forEach(function (el) {
  new Selectpicker(el);
});
```

### 呼叫方法

方法直接适用于下列情况:

```js
const picker = Selectpicker.getInstance('#my-select');

picker.val('Cheese');     // set the value
picker.refresh();         // re-render after changing the underlying <select>
picker.selectAll();       // (multiple selects)
picker.destroy();         // remove the plugin and restore the original <select>
```

见 [方法](https://npmcn.com/package/%40crestapps/bootstrap-select/docs/content/methods.md) 完整名单.

### 将自定义 HTML 化

`data-content` HTML通过靴子-选择的内置零依赖性消毒器默认进行消毒.

如果你喜欢专用的消毒器,例如 [多维化](https://github.com/cure53/DOMPurify),保留 `sanitize: true` 并提供一个 `sanitizeFn`。钩子接收一阵DOM节点,因此将每个已设置的节点进行消毒:

```js
import DOMPurify from 'dompurify';

new Selectpicker('#my-select', {
  sanitize: true,
  sanitizeFn: function (domNodes) {
    domNodes.forEach(function (node) {
      node.innerHTML = DOMPurify.sanitize(node.innerHTML);
    });
  }
});
```

这使得库的依赖性在默认情况下保持了自由,同时让应用程序在需要时选择使用库支持的消毒器.

### 活动

活动作为本地活动发送 `CustomEvent`原文 `<select>` 元素(名称与原始名称完全相同) `*.bs.select` 事件)并可能 听到吗 `addEventListener`数字 :

```js
const select = document.querySelector('#my-select');

select.addEventListener('changed.bs.select', function (e) {
  // e.detail = { clickedIndex, isSelected, previousValue }
  console.log('value changed', e.detail);
});

select.addEventListener('show.bs.select', function (e) {
  // e.detail.bsEvent is the original Bootstrap dropdown event
  console.log('opening from', e.detail.bsEvent.relatedTarget);
});

select.addEventListener('loaded.bs.select', function () { /* ... */ });
```

可用事件 : `loaded`, (中文(简体) ), `rendered`, (中文(简体) ), `refreshed`, (中文(简体) ), `changed`, (中文(简体) ), `show`, (中文(简体) ), `shown`, (中文(简体) ), `hide`, (中文(简体) ), `hidden`, (中文(简体) ), `maxReached`, (中文(简体) ), `maxReachedGrp`, (中文(简体) ), `fetched` ——每个 后缀为 `.bs.select`。 。 。 .

## 文档

完整文件托管地点: **[(原始内容存档于2018-10-21). publictrap-select.crestapps.com](https://bootstrap-select.crestapps.com/)**, (中文(简体) ), 包括 [开始](https://bootstrap-select.crestapps.com/docs/), (中文(简体) ), [实例](https://bootstrap-select.crestapps.com/docs/examples), (中文(简体) ), [选项](https://bootstrap-select.crestapps.com/docs/options),以及 [方法](https://bootstrap-select.crestapps.com/docs/methods),以及 [活动](https://bootstrap-select.crestapps.com/docs/events)。 。 。 .

## 当地建筑

从源头与软件包合作,安装依赖和构建 `dist/`数字 :

```sh
# Requires Node.js 20.19 or newer for the development toolchain.
npm install
npm run build
```

有用的本地工作流程 :

```sh
npm run lint
npm test
```

关于文档站点命令和本地 Docusaurus 设置,见 [`docs/README.md`](https://npmcn.com/package/%40crestapps/bootstrap-select/docs/README.md)。 。 。 .

## 错误和特性请求

欢迎任何人和每个人作出贡献。 请审查 [提交文件的准则](https://npmcn.com/package/%40crestapps/bootstrap-select/CONTRIBUTING.md)。 。 。 .

## 版权和许可证

版权(C)2012-2018年 [SnapAccidents, 有限责任公司](https://snapappointments.com/) (原始内容存档于2013-10-12). 分叉修改 版权 (C) CrestApps.

许可证根据 [麻省理工学院执照](https://npmcn.com/package/%40crestapps/bootstrap-select/LICENSE)。 。 。 .

## 常见问题

### @crestapps/bootstrap-select 是什么？

一个无依赖性的,香草JavaScript插件,将所选择的元素带入了21世纪,带有直观多选,搜索,以及更多\. 支持"靴子"5\+\. 从快速任命/短跑选取出jQuery和bootstrap 3/4 supp

### 如何安装 @crestapps/bootstrap-select？

在项目目录运行 npm install @crestapps/bootstrap-select，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：bootstrap（\>=5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @crestapps/bootstrap-select 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/crestapps\_\_bootstrap-select 是否存在。

### @crestapps/bootstrap-select 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @crestapps/bootstrap-select 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.19\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @crestapps/bootstrap-select 可以商用吗？

@crestapps/bootstrap-select 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @crestapps/bootstrap-select 的下载量有多少？

根据 npm 官方下载统计，@crestapps/bootstrap-select 在 2026/10/11 – 2026/11/09 这 30 天内被下载 3,079 次，日均约 103 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @crestapps/bootstrap-select 还在维护吗？

最新版本 1\.2\.6 发布于 2026/10/05（1 个月前）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2026/06/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。