简介
chosen-js 是一个快速、简单并且方便的 jQuery 插件，用于优化 HTML select 标签的样式和功能。chosen-js 具有自定义样式、搜索、多选等功能，适用于前端开发人员为复杂表单或选择器提供用户友好的选择体验。
安装
使用 npm install 命令安装 chosen-js：
npm install chosen-js --save
当然，你也可以通过下载源码包或使用 CDN 资源引入 chosen-js。
使用
在页面中引入
在页面中引入 jQuery 和 chosen.js/css：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
基本用法
<select class="chosen-select">
<option value="0">请选择</option>
<option value="1">Spring</option>
<option value="2">Summer</option>
<option value="3">Fall</option>
<option value="4">Winter</option>
</select>使用 jQuery 选择器找到 select 标签，并调用 chosen 方法：
$(".chosen-select").chosen();这样就可以让选择器样式变得更加美观，并具有了搜索和多选功能。
选项
可以在初始化时提供选项，如下：
$(".chosen-select").chosen({
no_results_text: "没有匹配结果",
max_selected_options: 3
});常见选项及其意义：
no_results_text: 当搜索无结果时显示的文本。max_selected_options: 最大可选数量。allow_single_deselect: 选项是否可以取消。disable_search: 是否隐藏搜索框。disable_search_threshold: 当选项小于等于该设置的数量时隐藏搜索框。
事件
chosen-js 支持多个事件，在初始化时传入功能回调函数即可使用，如下：
$(".chosen-select").chosen().change(function(event, params) {
console.log(params.selected); // 当前选中项
});常见事件及其意义：
change: 当选择器的值更改时触发。chosen:showing_dropdown: 当下拉列表显示时触发。chosen:hiding_dropdown: 当下拉列表关闭时触发。
总结
chosen-js 是一款优秀的 jQuery 插件，可以优化 HTML select 的样式和功能，从而为用户带来更好的交互体验。 在本文中我们介绍了 npm 的安装方式、引入方式、基本使用方法、选项及其意义以及事件及其意义等知识， 希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcb9ab5cbfe1ea0612635