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

Chosen 是一个支持jquery的selec t下拉框美化插件，它能让丑陋的、很长的selec t选择框变的更好看、更方便。不仅如此，它更扩展了selec t，  增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。

chosen的使用方法：

1. 引入jquery库和脚本

2. html创建-selec t-标签，如下:

APP微信

微信扫一扫

微信当面付

APP支付宝

支付宝当面付

支付宝扫一扫

现金

刷卡

注：在selec t标签上添加 data-placeholder属性定义默认文字, 添加multiple="multiple" 属性标识多选，添加class="chosen-selec t" 属性

对齐方式：

选项文字默认是左对齐的，可以在class属性中加入“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");

另外一个不错的selectJS插件，支持多选、搜索和下拉滚动条分页加载数据,项目地址：https://select2.org/

参考文档：