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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
JavaScript实现修改伪类样式
Nov 27 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
使用php计算排列组合的方法
2013/11/13 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python里 super类的工作原理详解
2019/06/19 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
在Django中实现添加user到group并查看
2019/11/18 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
python中数据库like模糊查询方式
2020/03/02 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python函数调用追踪实现代码
2020/11/27 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
优秀士兵个人事迹材料
2014/01/19 职场文书
环保倡议书范文
2014/05/12 职场文书
电子专业自荐信
2014/07/01 职场文书
2014年行政工作总结
2014/11/19 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
年度考核表个人总结
2015/03/06 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
田径运动会广播稿
2015/08/19 职场文书
数学复习课教学反思
2016/02/18 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫