Jquery多选下拉列表插件jquery multiselect功能介绍及使用


Posted in Javascript onMay 24, 2013

有一个多选的需求,在网上找到了这个插件:multiselect
https://github.com/ehynds/jquery-ui-multiselect-widget
csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵!

先简单说说这个插件:
jquery-multiselect 基于Jquery-ui的组件体系。
所以使用它的时候,先得导入jquery-ui相关的js和css哦
特性
•支持点击label实现checkbox组选择.
•头部选项,如全选/ 取消全选 /关闭功能.
•支持键盘选择.
•支持5种不同的事件回调函数.
•以列表方式显示选中项目,并且可以设置最大显示值.
•方便改变位置,渐变速度,滚动容器的高度,链接文字,文本框默认内容等.
效果如图:

Jquery多选下拉列表插件jquery multiselect功能介绍及使用


上图效果的代码:
html代码:
<select id ="sela" title="Basic example" multiple="multiple" name="example-basic" size="5"> 
<option value="V1">Option 1</option> 
<option value="V2">Option 2</option> 
<option value="V3">Option 3</option> 
<option value="option4">Option 4</option> 
<option value="option5">Option 5</option> 
<option value="option6">Option 6</option> 
<option value="option7">Option 7</option> 
<option value="option8">Option 8</option> 
<option value="option9">Option 9</option> 
<option value="option10">Option 10</option> 
<option value="option11">Option 11</option> 
<option value="option12">Option 12</option> 
</select>

调用multiselect插件的代码:
$(function(){ 
$("select").multiselect({ 
noneSelectedText: "==请选择==", 
checkAllText: "全选", 
uncheckAllText: '全不选', 
selectedList:4 
}); 
});

调用multiselect时有不少参数,我想官方文档写的很详啦,懂E文的同学都可以看看哦。
好,下面是我们最关心的问题,怎么获取选中的值?

官方文档没有找到哪个方法可以获得select控件中选中的项的值。我读了它的源代码,是 1.14pre版本。真的没找到。

不过我们可以自己DIY一下这个插件哦!很简单地说!
首先声明一个变量用来记录选中的值列表,截个图:
Jquery多选下拉列表插件jquery multiselect功能介绍及使用 
然后我们会发现源码里有一个update方法,这个方法是用来获取用户选中项的文本,呵呵,于是乎我们想到了,简单DIY一下:

Jquery多选下拉列表插件jquery multiselect功能介绍及使用


然后在代码中添加一个方法:
MyValues:function(){ 
return multiValues; 
}

ok,对插件的DIY完成了。下面是页面上调用喽:
function showValues() { 
var valuestr = $("#sela").multiselect("MyValues"); 
alert(valuestr); 
}

Yeah,OK啦!
Diy的代码和Demo见附件。
Javascript 相关文章推荐
javascript 主动派发事件总结
Aug 09 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 #Javascript
jQuery实现表头固定效果的实例代码
May 24 #Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 #Javascript
使用js+jquery实现无限极联动
May 23 #Javascript
dwz 如何去掉ajaxloading具体代码
May 22 #Javascript
自动最大化窗口的Javascript代码
May 22 #Javascript
JS中的prototype与面向对象的实例讲解
May 22 #Javascript
You might like
图形数字验证代码
2006/10/09 PHP
php查看当前Session的ID实例
2015/03/16 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
利用Python破解斗地主残局详解
2017/06/30 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
python中_del_还原数据的方法
2020/12/09 Python
Python截图并保存的具体实例
2021/01/14 Python
编码实现字符串转整型的函数
2012/06/02 面试题
新闻记者个人求职的自我评价
2013/11/28 职场文书
毕业学生推荐信
2013/12/01 职场文书
教师绩效考核方案
2014/01/21 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
工作简报范文
2015/07/21 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server