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的更多相关文章

  1. jQuery超酷下拉插件6种效果演示

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

  2. html 布局;css3+jq 下拉菜单;table分页动态添加行;html5本地存储;简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  3. jq 下拉框获取选中自定义属性值

    // 下拉框发送改变后 获取选择的信息 <div class="form-group"> <label class="col-sm-3 control- ...

  4. JQ下拉加载更多

    <!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...

  5. select2下拉插件

    下拉单选: 1.行内 1)初始化数据: <select class="form-control select5"> <option selected>张三1 ...

  6. 带搜索的下拉框Chosen

    一:参考 https://harvesthq.github.io/chosen/ Chosen是一个jQuery插件 二:引入js文件 <link href="plug-in/chos ...

  7. 带搜索框的下拉框chosen.jQury.js

    下载所需js,css png资源     <link href="chosen.css" rel="stylesheet" type="text ...

  8. 使用Bootstrap的suggest下拉插件

    前端代码 /*html代码*/ <input type="text" class="form-control search_ul" id="ca ...

  9. jq 下拉框

    <div class="alls"> <div class="item"> <div class="all"& ...

随机推荐

  1. ElementTree之Xml文档处理

    ElementTree: 表示整个XML层级结构 Element: 表示树形结构中所有的父节点 SubElement: 表示树形结构中所有的子节点 有些节点既是父节点,又是子节点 下面来看下这两个类的 ...

  2. js 多个倒计时,毫秒倒计时

    其实主要是借鉴了了这篇文的写法(http://tuzwu.iteye.com/blog/819081),俺稍作了修改,以便更适合我的需要: 实现功能:调用一个函数,传入html元素的id,和一个截止时 ...

  3. vue 插件(Sublime Text 3 常用插件以及安装方法)(转)

    使用Package Control组件安装 也可以安装package control组件,然后直接在线安装:按Ctrl+` 调出console粘贴以下代码到底部命令行并回车: { import url ...

  4. HashMap resize代码详解(二)

    关于其中的resize方法如下: final Node<K,V>[] resize() { Node<K,V>[] oldTab = table; int oldCap = ( ...

  5. Java基础学习-包装类

    package packaging; /*包装类: 是封装了基本数据类型的类,为了提供更多复杂方法 Integer: String---int 1.intvalue() 2.parseTnt() in ...

  6. Django中关于事务的代码编写

    Django中对于数据库的事务,默认每执行一句数据库操作,便会自动提交. 在Django中可以通过django.db.transaction模块提供的atomic来定义一个事务,atomic提供两种用 ...

  7. java事务(三)

    java事务(三)——自己实现分布式事务 在上一篇<java事务(二)——本地事务>中已经提到了事务的类型,并对本地事务做了说明.而分布式事务是跨越多个数据源来对数据来进行访问和更新,在J ...

  8. Kotlin Reference (一) Basic Syntax

    什么是Kotlin Kotlin翻译成中文叫"靠他灵",它是由JetBrains公司发明的一种基于JVM的编程语言,目前Google宣布kotlin为Android开发的官方语言. ...

  9. Python中基本的读文件和简单数据处理

    Python中基本的读文件和简单数据处理 暂无评论 DataQuest上面的免费课程(本文是Python基础课程部分),里面有些很基础的东西(csv文件读,字符串预处理等),发在这里做记录.涉及下面六 ...

  10. 对pandas的dataframe绘图并保存

    对dataframe绘图并保存: ax = df.plot() fig = ax.get_figure() fig.savefig('fig.png') 可以制定列,对该列各取值作统计: label_ ...