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 相关文章推荐
aspx中利用js实现确认删除代码
Jul 22 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
js获取checkbox值的方法
Jan 28 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
layui自定义工具栏的方法
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 特殊字符处理函数
2008/09/05 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
js实现点击生成随机div
2020/01/16 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python如何删除文件中重复的字段
2019/07/16 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
Python调用Redis的示例代码
2020/11/24 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
党课学习思想汇报
2014/01/02 职场文书
《桥》教学反思
2014/04/09 职场文书
银行求职信范文
2014/05/26 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS