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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 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
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php读取3389的脚本
2014/05/06 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
Django实现网页分页功能
2019/10/31 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python super函数使用方法详解
2020/02/14 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
大学毕业感言100字
2014/02/03 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android