jquery.chosen下拉框多选插件使用详解

2017年11月30日 15674点热度 0人点赞 0条评论

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下拉框多选插件使用详解

文章评论