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 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
js 金额文本框实现代码
Feb 14 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 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模板引擎SMARTY
2006/10/09 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
Python随机读取文件实现实例
2017/05/25 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
python中使用np.delete()的实例方法
2021/02/01 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
大学生优秀自荐信范文
2014/02/25 职场文书
小组名称和口号
2014/06/09 职场文书
课外小组活动总结
2014/08/27 职场文书
股权转让协议书
2014/12/07 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
2016新年感言
2015/08/03 职场文书