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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
用javascript连接access数据库的方法
Nov 17 Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
如何利用vue实现波谱拟合详解
Nov 05 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模板引擎技术简单实现
2016/03/15 PHP
newxtree.js代码
2007/03/13 Javascript
用javascript做拖动布局的思路
2008/05/31 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python实例一个类背后发生了什么
2016/02/09 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
儿童生日会策划方案
2014/05/15 职场文书
2014年药店工作总结
2014/11/20 职场文书
云台山导游词
2015/02/03 职场文书
经理聘任证明
2015/03/02 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA