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 相关文章推荐
JSON 数字排序多字段排序介绍
Sep 18 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
Vue v-text指令简单使用方法示例
Sep 19 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中把对象转换为关联数组代码分享
2015/04/09 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
php文件系统处理方法小结
2016/05/23 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
JavaScript事件列表解说
2006/12/22 Javascript
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
javascript 写类方式之三
2009/07/05 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
python通过smpt发送邮件的方法
2015/04/30 Python
python自动化报告的输出用例详解
2018/05/30 Python
python 把列表转化为字符串的方法
2018/10/23 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python控制台实现交互式环境执行
2020/06/09 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
理工科学生的自我评价
2013/12/15 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
在项目中使用redis做缓存的一些思路
2021/09/14 Redis