jq下拉插件,chosen
Chosen 选项列表
<select data-placeholder="请选择" class="chosen-select" tabindex="2">
<option value="">Select</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
通过参数传递的选项
以下参数在实例化的时候通过参数设置。
$('.my_select_box').chosen({
disable_search_threshold: 10,
no_results_text: 'Oops, nothing found!',
width: '95%'
});
| 选项 | 默认值 | 描述 |
|---|---|---|
| allow_single_deselect | false | 设置为 true 时非必选的单选框会显示清除选中项图标 |
| disable_search | false | 设置为 true 隐藏单选框的搜索框 |
| disable_search_threshold | 0 | 少于 n 项时隐藏搜索框 |
| enable_split_word_search | true | 是否开启分词搜索,默认开启 |
| inherit_select_classes | false | 是否继承 select 元素的 class,如果设为 true,Chosen 将把 select 的 class 添加到容器上 |
| max_selected_options | Infinity | 最多选择项数,达到最大限制时会触发 chosen:maxselected 事件 |
| no_results_text | "No results match" | 没有搜索到匹配项时显示的文字 |
| placeholder_text_multiple | "Select Some Options" | 多选框没有选中项时显示的占位文字 |
| placeholder_text_single | "Select an Option" | 单选框没有选中项时显示的占位文字 |
| search_contains | false | 搜素包含项,默认从第一个字符开始匹配 |
| single_backstroke_delete | true | 多选框中使用退格键删除选中项目,如果设为 false,第一次按 delete/backspace 会高亮最好一个选中项目,再按会删除该项 |
| width | Original select width. | Chosen 生成的选择框宽度,默认为和原 select 宽度保持一致 |
| display_disabled_options | true | 是否显示禁止选择的项目 |
| display_selected_options | true | 多选框是否在下拉列表中显示已经选中的项 |
属性
可以通过在 <select> 上设置属性传递给 Chosen。
<select class="my_select_box" data-placeholder="Select Your Options">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3" disabled>Option 3</option>
</select>
| 属性 | 描述 |
|---|---|
| data-placeholder | 占位符文字 注意: 改属性会覆盖 placeholder_text_multiple 或 placeholder_text_single 选项。 |
| multiple | 有此属性的 select 会渲染成可以多选的 Chosen 选框 |
| selected, disabled | 设置选中、禁止状态,Chosen 会读取这些属性 |
触发事件
Chosen 会在源 <select> 元素上触发事件。
$('.my_select_box').on('change', function(e, params) {
do_something(e, params);
});
| 事件 | 描述 |
|---|---|
| change | Chosen 触发标准的 change 事件,同时会传递 selected or deselected 参数, 方便用户获取改变的选项 |
| chosen:ready | Chosen 实例化完成时触发 |
| chosen:maxselected | 超过 max_selected_options 设置时触发 |
| chosen:showing_dropdown | Chosen 下拉选框打开完成时触发 |
| chosen:hiding_dropdown | Chosen 下拉选框关闭完成时触发 |
| chosen:no_results | 搜索没有匹配项时触发 |
注意:所有 Chosen 自定义事件 都包含 Chosen 实例 chosen 对象作为参数。
Chosen 监听的事件
通过在 <select> 元素上触发特定事件可以调用 Chosen 的监听函数。
// tell Chosen that a select has changed
$('.my_select_box').trigger('chosen:updated');
| 事件 | 描述 |
|---|---|
| chosen:updated | 通过 JS 改变 select 元素选项时应该触发此事件,以更新 Chosen 生成的选框 |
| chosen:activate | 相当于 HTML focus 事件 |
| chosen:open | 激活 Chosen 并显示搜索结果 |
| chosen:close | 关闭 Chosen 并隐藏搜索结果 |
jq下拉插件,chosen的更多相关文章
- jQuery超酷下拉插件6种效果演示
原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...
- html 布局;css3+jq 下拉菜单;table分页动态添加行;html5本地存储;简单易用的html框架
简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...
- jq 下拉框获取选中自定义属性值
// 下拉框发送改变后 获取选择的信息 <div class="form-group"> <label class="col-sm-3 control- ...
- JQ下拉加载更多
<!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...
- select2下拉插件
下拉单选: 1.行内 1)初始化数据: <select class="form-control select5"> <option selected>张三1 ...
- 带搜索的下拉框Chosen
一:参考 https://harvesthq.github.io/chosen/ Chosen是一个jQuery插件 二:引入js文件 <link href="plug-in/chos ...
- 带搜索框的下拉框chosen.jQury.js
下载所需js,css png资源 <link href="chosen.css" rel="stylesheet" type="text ...
- 使用Bootstrap的suggest下拉插件
前端代码 /*html代码*/ <input type="text" class="form-control search_ul" id="ca ...
- jq 下拉框
<div class="alls"> <div class="item"> <div class="all"& ...
随机推荐
- Oracle 常用系统包
一.DBMS_OUTPUT(用于输入和输出信息) 二.DBMS_JOB(用于安排和管理作业队列) 三.dbms_pipe(类似UNIX系统的管道) 四.dbms_alert(用于生成并传递数据库预警信 ...
- arch初认识
在这里下载最新的iso镜像,一个iso里面已经包括了32和64位. 来者不善. 进去后竟然是进入字符界面,并且给各位留了一个install.txt,果然..==! 好吧,粗略看下install.txt ...
- vux配置i18n
根据使用文档,先引入i18n import VueI18n from 'vue-i18n'; Vue.use(VueI18n) const i18n = new VueI18n({ locale: ' ...
- APUE学习笔记——6.10 时间与时间例程 time_t
Unix提供的最基本的时间服务室日历时间(纪元时间),也就是计算1970年1月1日0时0分0秒到当前的秒数.该秒数用time_t表示. typedef long time_t; /* 时 ...
- c# JScriptProvider包装
using System; using System.CodeDom.Compiler; using System.Reflection; using System.Web.UI; using Mic ...
- Linux:cd命令详解
cd 用来变更用户所在目录的 绝对路径:路径的写法一定由根目录 "/" 写起.例如 /usr/local/mysql 这就是绝对路径.相对路径:路径的写法不是由根目录 " ...
- 天气预报api整理
目录 1.国家气象局提供的天气预报接口 1.1.接口网址 1.2.示范代码 2.各个城市对应的代码 作为一个开发的diaosi,在开发过程中,时常会遇到添加天气的功能,现在百忙之中抽出一点时间整理了一 ...
- javaScript高程笔记--最佳实践
1.可维护性 <1>什么是可维护的代码 (1)可理解性 (2)直观性 (3)可适应性 (4)可扩展性 (5)可调试性 <2>代码约定 (1)可读性---适当的进行注释[函数和方 ...
- 使用微软T4 template进行代码生成
使得软件工程高效开发的主要方法是复用.复用的宗旨是提高设计的内聚性,主要包括:函数,类,模式,组件,框架等等.而有些应用场景并都是可以直接拿来现成代码使用的,有时代码库的代码不是那么容易修改,或者根本 ...
- 正则 匹配 HTML 标签
var tt=((result.data).toString()).match(/<style(([\s\S])*?)<\/style>/g);