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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
化妆品促销方案
2014/02/24 职场文书
请假条的格式
2014/04/11 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
十八大标语口号
2014/10/09 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL