jquery的插件选择chosen的使用
版权声明:本文为博主原创文章,未经博主允许不得转载。http ://blog.csdn.net/jobschen/article/details/46619443
一,文件引入
jquery // jquery必须,且需要在chosen.js之前
chosen.jquery.min.js //压缩版的选择核心jquery代码
chosen.css //选择的样式文件
二,代码示例
1。html代码
<select class="chosen-select" data-placeholder="Choose a Country..." multiple> </select>
- 1
data-placeholder是将第一个选项留空时默认显示的内容。multiple
表示可以多选
主要还是class =“chosen-select”
2。JS代码
$(".chosen-select").chosen({
no_results_text: "没有找到结果!",//搜索无结果时显示的提示
search_contains:true, //关键字模糊搜索,设置为false,则只从开头开始匹配
allow_single_deselect:true, //是否允许取消选择
max_selected_options:6 //当select为多选时,最多选择个数
});
3。事件
a)更改事件:
$(".dept-select").chosen().change(function(){
//do something...
});
b)当我们需要动态更新选择下的选择项时,只需在更新选择项后触发选择中的liszt:updated事件就可以了
//...$(".dept-select").html('...<option>部门6</option>...');
$(".dept-select").trigger("liszt:updated");
以上只是部分选择插件的使用,更多配置属性,尽请百度...
jquery的插件选择chosen的使用的更多相关文章
- 利用jquery mobiscroll插件选择日期、select、treeList的具体运用
体验更优排版请移步原文:http://blog.kwin.wang/programming/jquery-mobiscroll-select-treeList.html mobiscroll是个很好用 ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- 基于jquery的城市选择插件
城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...
- ui-choose|列表选择jQuery美化插件
ui-choose是一款基于jQuery的列表选择美化插件.ui-choose可用于选项不太多的select.radio.checkbox等,提升用户体验. 使用方法 使用ui-choose列表美化插 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- jQuery常用插件
jQuery UI插件简介: jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具 ...
- Jquery相册插件(开源下载)
一,导言 上次 “不定义JQuery插件,不要说会JQuery” 的博客写的肤浅,漏洞百出,而且最重要的是从理论上说如何定义一个jQuery插件,没有实质性的写一个jQuery插件出来,这未免是纸上谈 ...
- S Gallery – 很有特色的响应式 jQuery 相册插件
S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...
- Select-or-Die:灵活的 jQuery 下拉列表插件
Select-or-Die 是一个 jQuery 插件,用来自定义下拉列表(Select)元素.原生的下拉选择元素在各个浏览器的默认样式差异很多,而且自定义样式很困难,因此 Web 开发人员喜欢使用插 ...
随机推荐
- JavaScript四则运算计算器
直接上代码: 首先是HTML代码 <form> 第一个数字:<br> <input type="text" id="num1"&g ...
- boost之操作系统相关
1.保存I/O流 下面这段代码cout会失效,原因是cout重定向之后失效. #include <iostream> #include <fstream> using name ...
- 解读mysql主从配置及其原理分析(Master-Slave)
在windows下配置的,后面会在Linux下配置进行测试,需要配置mysql数据库同步的朋友可以参考下. 1.在主数据库服务器为从服务器添加一个拥有权限访问主库的用户:GRANT REPLICATI ...
- JAVA & C++ 多态
多态,也叫动态绑定. Java: class A { public void f1() { System.out.println("A:f1"); } public void f2 ...
- iOS 单例模式 学习 "52个方法 第6章 45条 使用 dispath_once 来执行只需运行一次的线程安全代码"
百度定义:单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例. 维基百科:在软件工程中,单例是一种用于实现单例的数学概念,即将 ...
- asp.net,缓存Cache
缓存Cache: >直接使用Cache["content"],缓存与Session不同,所有用户都可以共享.永不过期,由服务器自己维护,当内存不够时,会将老的缓存释放掉. & ...
- SQL语句 自连表查询。inner join用法,partition by ,列转行查询
use mydb1 go -- 表T_Employee2 -- Id Name Position Dept -- 1 张三 员工 市场部 -- 2 李四 经理 销售部 -- 3 王五 经理 市场部 - ...
- 键盘没有Home键和End键的完美解决办法
最近新入手一个笔记本,发现键盘没有Home/End,这两个键虽然不是必用,但也是用顺手了,特别是选择一行,到行首,行尾的时候甚是方便 作为一枚程序员,怎么能够妥协? 于是开始研究 方案一 通过观察笔记 ...
- Ubuntu10.04下的使用使用华为E1750 3G模块
系 统:Ubuntu 10.04 3G模块:华为E1750 1 安装usb-modeswitch软件 E1750 无线上网卡并没有提供linux环境下的驱动程序,但我们可以通过USB模式转换来让l ...
- imx6qsbd lvds dtc
lvds显示屏调试参考 1.基于飞思卡尔imxsolosabresd开发板Linux-3.10.53 lvds屏幕调试: http://blog.csdn.net/qq_37375427/articl ...