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 相关文章推荐
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
Angularjs 基础入门
Dec 26 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python自动调用IE打开某个网站的方法
2015/06/03 Python
全面了解python字符串和字典
2016/07/07 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
python实现求特征选择的信息增益
2018/12/18 Python
python面向对象 反射原理解析
2019/08/12 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
外企求职信范文分享
2013/12/31 职场文书
财务工作检讨书
2014/10/29 职场文书
2014年教师工作总结
2014/11/10 职场文书
2014年行政部工作总结
2014/11/19 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python