简介
chosen-js 是一个快速、简单并且方便的 jQuery 插件，用于优化 HTML select 标签的样式和功能。chosen-js 具有自定义样式、搜索、多选等功能，适用于前端开发人员为复杂表单或选择器提供用户友好的选择体验。
安装
使用 npm install 命令安装 chosen-js：
--- ------- --------- ------
当然，你也可以通过下载源码包或使用 CDN 资源引入 chosen-js。
使用
在页面中引入
在页面中引入 jQuery 和 chosen.js/css：
----- ---------------- ------------------------------------------------------------------------- -- ------- --------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------
基本用法
------- ----------------------
------- ----------------------
------- -------------------------
------- -------------------------
------- -----------------------
------- -------------------------
---------使用 jQuery 选择器找到 select 标签，并调用 chosen 方法：
-----------------------------
这样就可以让选择器样式变得更加美观，并具有了搜索和多选功能。
选项
可以在初始化时提供选项，如下：
----------------------------
---------------- ---------
--------------------- -
---常见选项及其意义：
no_results_text: 当搜索无结果时显示的文本。max_selected_options: 最大可选数量。allow_single_deselect: 选项是否可以取消。disable_search: 是否隐藏搜索框。disable_search_threshold: 当选项小于等于该设置的数量时隐藏搜索框。
事件
chosen-js 支持多个事件，在初始化时传入功能回调函数即可使用，如下：
--------------------------------------------------- ------- -
----------------------------- -- -----
---常见事件及其意义：
change: 当选择器的值更改时触发。chosen:showing_dropdown: 当下拉列表显示时触发。chosen:hiding_dropdown: 当下拉列表关闭时触发。
总结
chosen-js 是一款优秀的 jQuery 插件，可以优化 HTML select 的样式和功能，从而为用户带来更好的交互体验。 在本文中我们介绍了 npm 的安装方式、引入方式、基本使用方法、选项及其意义以及事件及其意义等知识， 希望对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcb9ab5cbfe1ea0612635