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常用对象的方法和属性小结
Jan 24 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
常用DOM整理
Jun 16 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
js密码强度校验
Nov 10 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
小程序中的箭头函数的具体使用
Jun 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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP精确计算功能示例
2016/11/29 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
Python中的元组介绍
2019/01/28 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
运动会800米加油稿
2014/02/22 职场文书
初中军训感想300字
2014/03/05 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
民主生活会发言材料
2014/10/20 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python