jquery.chosen下拉框多选插件使用详解
Chosen 是一个支持jquery的selec t下拉框美化插件，它能让丑陋的、很长的selec t选择框变的更好看、更方便。不仅如此，它更扩展了selec t， 增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。
demo：https://harvesthq.github.io/chosen/
chosen的使用方法：
1. 引入jquery库和脚本
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/chosen/1.8.2/chosen.jquery.min.js"></script>
2. html创建-selec t-标签，如下:
<selec t data-placeholder="全部" class="chosen-selec t" multiple style="width:200px;" tabindex="4">
<option value="APP_WEIXIN_PAY" hassubinfo="true">APP微信</option>
<option value="WEIXIN_GZH_PAY" hassubinfo="true">微信扫一扫</option>
<option value="WEIXIN_NATIVE_PAY" hassubinfo="true">微信当面付</option>
<option value="ALI_APP_PAY" hassubinfo="true">APP支付宝</option>
<option value="ALI_NATIVE_PAY" hassubinfo="true">支付宝当面付</option>
<option value="ALI_MOBILE_WEB_PAY" hassubinfo="true">支付宝扫一扫</option>
<option value="CASH_PAY" hassubinfo="true">现金</option>
<option value="CARD_PAY" hassubinfo="true">刷卡</option>
</selec t>
注：在selec t标签上添加 data-placeholder属性定义默认文字, 添加multiple="multiple" 属性标识多选，添加class="chosen-selec t" 属性
对齐方式：
选项文字默认是左对齐的，可以在class属性中加入“chzn-rtl”来设置右对齐：
<selec t data-placeholder="请选择" class="dept_selec t chzn-rtl" >
3.初始化组件，js中调用chosen定义的方法
$(".chosen-selec t").chosen({
no_results_text: "没有找到结果->",//搜索无结果时显示的提示
search_contains:true, //关键字模糊搜索，设置为false，则只从开头开始匹配
allow_single_deselect:true, //是否允许取消选择
max_selected_options:6 //当select为多选时，最多选择个数
}).change(function(){ //change事件回调
do someing....
});
4. chosen js参数设置
在调用chosen()方法时，我们可以设置一些参数：
no_results_text 无搜索结果显示的文本
allow_single_deselect 是否允许取消选择
max_selected_options 当selec t为多选时，最多选择的个数
change事件：
$(".dept-select").chosen().change(function(){
//do something...
});
当我们需要动态更新select下的选择项时，
在更新选择项后触发Chosen中的liszt:updated事件就可以了
$(".dept-select").trigger("liszt:updated");
chosen插件git地址：https://github.com/harvesthq/chosen
另外一个不错的selectJS插件，支持多选、搜索和下拉滚动条分页加载数据,项目地址：https://select2.org/
参考文档：
http://blog.csdn.net/iamduoluo/article/details/11519909
jquery.chosen下拉框多选插件使用详解：等您坐沙发呢！
发表评论
