chosen 下拉框
$("#teams").trigger("liszt:updated");//更新重新绑定
$("#teams").chosen()
https://github.com/amazeui/chosen/blob/master/docs/options.md
Chosen 选项列表
通过参数传递的选项
以下参数在实例化的时候通过参数设置。
$('.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 并隐藏搜索结果 |
chosen 下拉框的更多相关文章
- chosen下拉框插件的使用
效果如下 第一步: 第二步: 根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值. <link r ...
- jQuery下拉框扩展和美化插件Chosen
Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- chosen组件实现下拉框
chosen组件用于增强原生的select控件,使之有更好的用户体验.官方demo https://harvesthq.github.io/chosen/ 目前项目中碰到的使用,比如一个页面中有两个不 ...
- 下拉框搜索插件chosen
{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta ...
- JS-日期框、下拉框、全选复选框
<!-- 下拉框 --><link rel="stylesheet" href="static/ace/css/chosen.css" /&g ...
- jquery 下拉框插件,实现智能补全,模糊搜索,多选
近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...
- MVC实现多选下拉框,保存并显示多选项
在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...
- MVC实现多选下拉框
借助Chosen Plugin可以实现多选下拉框. 选择多项: 设置选项数量,比如设置最多允许2个选项: 考虑到多选下拉<select multiple="multiple" ...
- jquery实现下拉框多选
一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...
随机推荐
- 27、Service
1服务可以通过startservice的方法 开启.通过stopservice的方法 停止. 服务有一个特点: 只会一次onCreate()方法一旦被创建出来,以后oncreate() 就不会再被执行 ...
- 发布代码小助手V2.1发布了——Code2HTML工具
设计起源: 新浪博客似乎没有插入代码的功能,所以不得不用打空格的方法格式化代码.而且没法显示行号. 描述: 发布代码小助手用python和Tkinter开发,可以在任何常见操作系统上运行.主要用于在不 ...
- C++多线程框架-----Mutex互斥和Sem信号量
互斥和信号量是多线程编程的两个基础,其原理就不详细说了,大家去看看操作系统的书或者网上查查吧. 对于互斥的实现,无论什么操作系统都离不开三个步骤 1.初始化互斥锁 2.锁操作 3.解锁操 ...
- leetcode@ [173] Binary Search Tree Iterator (InOrder traversal)
https://leetcode.com/problems/binary-search-tree-iterator/ Implement an iterator over a binary searc ...
- [假期总结]Self
8月底返校,这一周也没有勤学苦练.假期3周的时间学习了nodejs. 1.nodejs的学习 学习了一本书上的例程,搭建了个博客.这种程度等于是能够动手开发的阶段,前路还很漫长. 2.个人网站的建设 ...
- 100+经典Java面试题及答案解析
面向对象编程(OOP) Java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可靠性和灵活性. 增加代码 ...
- BroadcastReceiver学习笔记
1.在代码中注册与在AndroiManifest.xml注册的区别 (a)在代码中注册可以控制注册与注销的时间.比如在onCreate-onDestory, onStart-onStop, onRes ...
- delphi 完全控制Excel 文件
( 一 ) 使用动态创建的方法 uses ComObj; 首先创建 Excel 对象Var ExcelApp : Variant ; ExcelApp := CreateOleObject ( ...
- 教程-Delphi第三方控件安装卸载指南
1 只有一个DCU文件的组件.DCU文件是编译好的单元文件,这样的组件是作者不想把源码公布.一般来说,作者必须说明此组件适合Delphi的哪种版本,如果版本不对,在安装时就会出现错误.也正是因为没有源 ...
- SQL2008-功能设置
1.问题:修改表字段类型后,无法保存答:工具—选项—Designers—表设计器和数据库设计器—阻止保存要求重新创建表的更改前的勾去掉. 2.问题: 编写SQL语句的地方怎么自动换行答:工具-> ...