jquery.chosen下拉框多选插件使用详解_蓝戒的博客


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: "没有找到结果-&gt;",//搜索无结果时显示的提示
        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

本文固定链接: http://www.webzsky.com/?p=1174 | 蓝戒的博客

cywcd
该日志由 cywcd 于2017年11月30日发表在 javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jquery.chosen下拉框多选插件使用详解 | 蓝戒的博客
关键字: , ,

jquery.chosen下拉框多选插件使用详解:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×