chosen.jquery.js 插件的使用和总结

chosen.jquery.js 插件的使用及总结

1. chosen插件简单的介绍：

Chosen 是select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。此外，还可以搜索查找下拉选项。它可对列表进行分组，同时也可禁用某些选择项。chosen.jquery.js 让你下拉框更简洁实用！

chosen插件依赖于jQuery库或者prototype，使用chosen插件之前要先引入jQuery或者prototype；

没有引入jquery，要先引入jquery（点击这里jquery线上引入以及下载链接）

chosen插件下载及使用教程：https://harvesthq.github.io/chosen/

chosen插件的选项介绍：https://harvesthq.github.io/chosen/options.html

chosen插件css线上cdn引入：

<link href=”https://cdn.bootcss.com/chosen/1.5.1/chosen.min.css” rel=’stylesheet ’/>
1

chosen插件线上cdn引入：

<script src=’https://cdn.bootcss.com/chosen/1.5.1/chosen.jquery.js’>script>
1

引入jquery和chosen插件，对需要美化的下拉框执行chosen函数：$(selector).chosen(options)；就可以把selector下拉框写成样式类，这样执行完chosen函数后，只要加上样式就可以了；

部分效果示例如下：
原单选下拉框：
使用chosen插件美化后的单选下拉框：

原多选下拉框：

使用chosen插件美化后的多选下拉框：

当然，chosen插件支持下拉框搜索：

2. chosen插件部分实用功能

隐藏单选搜索（如果有n个或更少的选项，则可以指定该选项以隐藏单选时的搜索输入）：

$(".chosen-select").chosen({disable_search_threshold: 10});
1

无结果文本支持（设置本文支持，当搜索下拉框时没有搜索到内容时的提示信息）：

$(".chosen-select").chosen({no_results_text:"没有搜索结果"});
1

限制多选中的选定个数（该参数限制用户可以选择的选项数量）：

$(".chosen-select").chosen({max_select_options: 5});
1

如果已经达到最大限制再次选择会触发事件：

$(".chosen-select").bind("chosen:maxselected",function(){·····});
1

允许在单选时取消选择（当前下拉框不是必选时，可以设置该元素取消选项，该配置只对第一个选项有空白文本时才有效）：

$(".chosen-select").chosen({allow_single_deselect: true});
1

支持下拉框从右到左的文本（默认为从左到右）：

$(“.chosen-select”).chosen({rtl: true});
1

监听值的改变（监听改变，选择或取消选择时，都会触发改变事件）：

$("#form_field").chosen.change(······);
1

摧毁选择恢复初始：

$("#form_field").chosen("destroy");
1

chosen自定义宽度：

$(".chosen-select").chosen({width:"95%"})；
1

3. chosen插件选项：

3. chosen插件监听事件：

chosen会在源元素上监听事件。

$(‘.chosen’).on(‘change’,function(e,params)){ do_something(e,params); });

注意：所有Chosen自定义事件都包含Chosen实例。chosen对象作为参数。

选项	描述
change	chosen触发标准的change事件，同时会传递selected或者deselected参数，方便用户获取改变的选项
chosen：ready	chosen实例化完成时触发
chosen：maxselected	超过max_selected_options设置时触发，也就是多选下拉框选择数量超过设置的限制
chosen：showing_dropdown	chosen下拉框打开完成时触发
chosen：hiding_dropdown	chosen下拉框关闭完成时触发
chosen：no_results	搜索没有匹配结果时触发

chosen触发的事件：
通过在 源元素上触发特定的事件：
$('.chosen').trigger('chosen:update');

选项	描述
chosen：updated	通过JS改变select元素选项时触发此事件，以更新chosen生成的选框
chosen：activate	相当于HTML的focus事件，focus事件:当元素获得焦点时，触发事件
chosen：open	激活Chosen并显示搜索结果
chosen：close	关闭Chosen并隐藏搜索结果

4. 对于select的一些使用操作：

设置chosen下拉框中的选项内容：

//设置下拉框选项内容
$(selectId).html(change_options);
//需要执行trigger方法，才会生效
$(selectId).trigger("chosen:updated");
1
2
3
4

设置chosen选中某项：

//设置选中第几项
$(selectId).get(0).selectedIndex=i;
//需要执行trigger方法，才会生效
$(selectId).trigger("chosen:updated");

//需要执行change()方法，才会触发onChange事件
$(selectId).change();
1
2
3
4
5
6
7

设置select内容：

清空select：

$("#select").empty();
1

设置select选项：

$("#select").html();
1

获取select的相关内容：

获取select选中的value：

$("#select").val();
1

获取select选中的text：

$("#select").find("option:selected").text();
1

获取select选中的索引：

$("#select").get(0).selectedIndex;
1

设置select选中某一项：

html页面代码：

<div>
    <select id="class_select">
        <option value="1">1901option>
        <option value="2">1902option>
        <option value="3">1903option>
        <option value="4">1904option>
        <option value="5">1905option>
    select>
div>
1
2
3
4
5
6
7
8
9

根据value值选中某一项：

$("#class_select option[value='2']").attr("selected","selected");
$("$class_select option[value='2']").attr("selected",true);
$("#class_select").val("2");
$("#class_select").get(0).value = '1';
1
2
3
4

以下两种方式只在jquery低于1.4.2（包含）中有效，在高版本内无效：

根据索引值选中某一项（i 为索引值 这里注意索引值从0开始）：

$("class_select").get(0).selectedIndex=i;
$("class_select").get(0).options[i].selected=true;
1
2

根据text值选中某一项：

$("#class_select option[text='1902']").attr("selected",true);
$("#class_select").find(option[text="1902"]).attr("selected",true);
1
2

高版本jquery也可以使用下列方法：

精确匹配，判断text值和给定字符串一致：

$("class_select option").filter(function(){return $(this).text()=="1902";}).attr("selected",true);
1

选择文本包含给定字符串的option：

$("class_select option:contains('1902')").attr('selected',true);
1

操作select的option选项

在尾部添加一项option：

$("#class_select").append("text");
1

在头部添加一项option：

$("#class_select").prepend("--请选择--");
1

删除最后一项option（根据索引删除，删除索引值最大的那一个）：

$("#class_select option:last").remove();
1

删除索引值为3的option：

$("#class_select option[index='3']").remove();
1

删除value值为3的option：

$("class_select option[value='3']").remove();
1

删除text值为1903的option：

$("class_select option[text='1903']").remove();
1

5.chosen插件引用示例：

//js 插件引用示例
$(function () {
    $('.chosen').chosen({
        no_results_text: "没有找到结果！",//搜索无结果时显示的提示  
        search_contains: true,   //关键字模糊搜索。设置为true，只要选项包含搜索词就会显示；设置为false，则要求从选项开头开始匹配
        allow_single_deselect: true, //单选下拉框是否允许取消选择。如果允许，选中选项会有一个x号可以删除选项
        disable_search: false, //禁用搜索。设置为true，则无法搜索选项。
        disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
        inherit_select_classes: true, //是否继承原下拉框的样式类，此处设为继承
        placeholder_text_single: '选择地区', //单选选择框的默认提示信息，当选项为空时会显示。如果原下拉框设置了data-placeholder，会覆盖这里的值。
        width: '168px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度，也会被width覆盖。
        max_shown_results: 100, //下拉框最大显示选项数量
        display_disabled_options: false,
        single_backstroke_delete: false, //false表示按两次删除键才能删除选项，true表示按一次删除键即可删除
        case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
        group_search: false, //选项组是否可搜。此处搜索不可搜
        include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示，true显示。默认false。
    });
    $('.chosen2').chosen({
        search_contains: false,
        enable_split_word_search: true //分词搜索，选项词可通过空格或'[]'分隔。search_contains为false时才能看出效果
    });
});当然参数可以动态的获取并初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

相关阅读:
Java-Day16 日期和时间相关API、数字格式化相关API
说说Flink双流join
Google Earth Engine ——ee.List.sequence函数的使用
.NET 8 Release Candidate 1 (RC1)现已发布，包括许多针对ASP.NET Core的重要改进！
腾讯云轻量服务器地域选择方法整理，选择不能修改！
Biotin-NHS LC（72040-63-2）生物素接头|站点特定探针
C++ Reference: Standard C++ Library reference: Containers: list: list: max_size
Android Jetpack组件架构 ：LiveData的使用和原理
vue监听浏览器网页关闭和网页刷新
在华为云 CCE 上部署 EMQX MQTT 服务器集群

原文地址：https://blog.csdn.net/cheng1a/article/details/126645106

• 最新文章
• C++11 线程同步接口std::condition_variable和std::future的简单使用
  Go runtime 调度器精讲（十一）：总览全局
  Spring框架漏洞总结
  Angular 18+ 高级教程 – 国际化 Internationalization i18n
  基于Tauri2+Vue3搭建桌面端程序|tauri2+vite5多窗口|消息提醒|托盘闪烁
  ComfyUI 基础教程(五) —— 应用 IP-Adapter 实现图像风格迁移
  网络空间的“边水往事”？针对华语黑产及用户进行攻击的 APT-K-UN3 活动分析
  伪装“黑神话悟空修改器”传播木马的活动分析
  全球蓝屏后，微软决定将安全踢出Windows内核
  Java读取寄存器数据的方法
  

• 热门文章
• 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
  奉劝各位学弟学妹们，该打造你的技术影响力了！
  五年了，我在 CSDN 的两个一百万。
  Java俄罗斯方块，老程序员花了一个周末，连接中学年代！
  面试官都震惊，你这网络基础可以啊！
  你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法
  心情不好的时候，用 Python 画棵樱花树送给自己吧
  通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！
  13 万字 C 语言从入门到精通保姆级教程2021 年版
  10行代码集2000张美女图，Python爬虫120例，再上征途