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 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
Vue props 单向数据流的实现
Nov 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 验证码的实现代码
2011/07/17 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
浅谈javascript中return语句
2015/07/15 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
详解如何webpack使用DllPlugin
2018/09/30 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
社团招新策划书
2014/02/04 职场文书
聘任书模板
2014/03/29 职场文书
平安校园建设方案
2014/05/02 职场文书
公司户外活动总结
2014/07/04 职场文书
党校学习心得体会范文
2014/09/09 职场文书
龙门石窟导游词
2015/02/02 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
离婚答辩状怎么写
2015/05/22 职场文书