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 开发人员喜欢使用插 ...
随机推荐
- 虚拟化qemu-img的简单用法。
qemu-img 命令行工具是 Xen 和 KVM 用来格式化各种文件系统的,可使用 qemu-img 格式化虚拟客户端映像.附加 ...
- CS224n学习资源汇总
一.课程网站: http://web.stanford.edu/class/cs224n/archive/WWW_1617/index.html 二.视频(中文字幕) http://www.mooc. ...
- XSS - 禁止浏览器读取Cookie - HttpOnly
1.什么是HttpOnly? 如果您在cookie中设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击,具体一点的介绍请google进行搜索. C ...
- MongoDB环境配置
在官网上下载MongoDB可执行文件安装在电脑上后,想要运行需先安装路径下新建一个data文件夹,再在里面新建db文件夹用户存放数据库文件和相关配置. 在bin目录里面运行命令行: 这样MongoDB ...
- vi高级命令集锦
.交换两个字符位置 xp .上下两行调换 ddp .把文件内容反转 :g/^/m0/ (未通过) .上下两行合并 J .删除所有行 dG .从当前位置删除到行尾 d$ .从当前位置复制到行尾 y$ 如 ...
- python:格式化输出 str.format()
官网说明:https://docs.python.org/2/library/string.html#formatstrings python的格式输出有两种方法: 1.“ %s”.(variant) ...
- 三 ip dns等配置
一IP.端口.协议基本概念 ip的简单概念 互联网上的计算机,都会有一个唯一的32位的地址,ip地址 我们访问服务器,就必须通过ip地址 局域网里也有预留的ip地址 192/10/172.居于王的i ...
- One 的使用(1)
方法一:使用命令提示符 第一步:打开d盘 C:Users\dcf>d; 第二步:打开工作空间 D:\>Cd workspace 第三步:打开the one D:\workspace& ...
- 【P2158】仪仗队&欧拉函数详解
来一道数论题吧. 这个题一眼看上去思路明确,应该是数论,但是推导公式的时候却出了问题,根本看不出来有什么规律.看了马佬题解明白了这么个规律貌似叫做欧拉函数,于是就去百度学习了一下这东西. 欧拉函数的含 ...
- vijos 1250 最勇敢的机器人 分组背包+并查集
P1250最勇敢的机器人 背景 Wind设计了很多机器人.但是它们都认为自己是最强的,于是,一场比赛开始了~ 描述 机器人们都想知道谁是最勇敢的,于是它们比赛搬运一些物品. 它们到了一个仓库,里面有n ...