前言
bootstrap4-chosen 是一个在 bootstrap4 的基础上，为了实现更好的选择框体验而进行的二次封装的插件，借鉴了 chosen 包在体验设计方面的成熟经验，使得原生的选择框变得更加美观和易用。
本文将介绍 bootstrap4-chosen 的使用方法和注意事项，并且配合实例代码进行说明，帮助前端开发人员更快更准确地掌握该插件的使用。
安装
可以通过 npm 来安装，打开终端输入：
npm install bootstrap4-chosen
也可以直接从 GitHub 仓库 下载源代码，将其中的 chosen.js 和 chosen.css 文件拷贝到项目中。
使用说明
引入文件
在 HTML 文件中引入 chosen 的 CSS 和 JS 文件，当然还需要引入 Bootstrap 的样式表。
-- -------------------- ---- ------- ------ --- ----- ---------------------------------------------- ---------------- -- ----- ---------------------------------------- ---------------- -- ------- ------ --- ------- ------------------------------------- ------- ----------------------------------------------------- ------- ------------------------------------------------------ -------
绑定选择框
在 HTML 中添加选择框代码，例如：
<select id="mySelect" class="form-control"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
在 JavaScript 文件中使用 jQuery 绑定选择框：
$(document).ready(function() {
$('#mySelect').chosen({
disable_search_threshold: 6,
allow_single_deselect: true,
width: '100%'
});
});chosen() 方法中的参数可以设置插件的属性，例如 disable_search_threshold 表示当下拉框中的项目数小于指定的值时，禁用搜索框。如果要取消该参数设置，可以使用 chosen("destroy") 方法，例如：
$('#mySelect').chosen("destroy");使用回调函数
插件支持多种回调函数，可以用来在选择框项目发生变化时执行一些操作，例如：
-- -------------------- ---- -------
---------------------------- -
-----------------------
------------------------- --
---------------------- -----
------ -------
---------------- ------ -- ------- --------
--------- ---------- -
--- ----------- - ---------------------
---------- -------- - - -------------
--
--------- ---------- -
---------------- ------ -- ---------
-
---
---实例
接下来演示一个选择框与表单的联动示例，用户可以根据选择框中的选项来动态修改表单中的其它元素。
HTML 代码：
-- -------------------- ---- -------
---- ---------------- ------
---- -------------------
------ -------------------------------
------- ------------- ---------------------
------- ----------------------------
------- --------------------------
------- ----------------------------------
------- --------------------------
---------
------
---- -------------------
------ -----------------------------
------ ----------- ------------ -------------------- --
------
---- -------------------
------- ------------- ---------- ------------ -------------------------
------
------JavaScript 代码：
-- -------------------- ---- -------
---------------------------- -
-- ----------
-------------------------- ---------- -
--- ----------- - ---------------------
--- -------- - ----------------------------------------
--- --- - ----------------------------- - ----------- - ------- - ---------
-------------------- - ----
---
-- -----------
--------------------------- ---------- -
--- ----------- - ---------------------
--- ---------------- - ---
------ ------------- -
---- --------
---------------- - --- --------
------
---- -------
---------------- - --- --------
------
---- -----------
---------------- - --- --------
------
---- -------
---------------- - --- --------
------
--------
---------------- - ---
------
-
--------------------------------- ------------------
---
-- ------
-----------------------
------------------------- --
---------------------- ------
------ -------
---------------- ----------
--------- ---------- -
---------------------------------
-
---
---通过选择框选定车辆品牌，表单中的输入框的占位文本会自动更新。
总结
bootstrap4-chosen 是一个功能强大同时兼顾美观和易用性的插件。该插件对于需要提高用户体验的前端应用来说非常实用，具有广泛的使用价值。在正确的使用方式和注意事项的帮助下，可以有效地提高开发效率和代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563d781e8991b448e131c