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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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实现cookie加密的方法
2015/03/10 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
详解Python中with语句的用法
2015/04/15 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python绘制直线的方法
2018/06/30 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
python 对key为时间的dict排序方法
2018/10/17 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python类的动态绑定实现原理
2020/03/21 Python
Python 如何实现访问者模式
2020/07/28 Python
python如何使用腾讯云发送短信
2020/09/17 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
群众对十八届四中全会的期盼
2014/10/17 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书