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.ajax)
Nov 19 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
js友好的时间返回函数
Aug 24 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
Angular短信模板校验代码
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
PHP脚本中include文件出错解决方法
2008/11/20 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
关于Python解包知识点总结
2020/05/05 Python
python3爬虫中异步协程的用法
2020/07/10 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
英语师范专业毕业生自荐信
2013/09/21 职场文书
历史专业毕业生的自我鉴定
2013/11/15 职场文书
演讲稿怎么写
2014/01/07 职场文书
北体毕业生求职信
2014/02/28 职场文书
作风转变心得体会
2014/09/02 职场文书
新闻报道稿范文
2015/07/23 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
详细分析PHP7与PHP5区别
2021/06/26 PHP
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记