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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
javascript 闭包详解
Feb 15 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 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
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
详解Vite的新体验
2021/02/22 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python根据区号生成手机号码的方法
2015/07/08 Python
python简单分割文件的方法
2015/07/30 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
Python Django基础二之URL路由系统
2019/07/18 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python爬虫基础知识点整理
2020/06/02 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
大学生年度自我鉴定
2013/10/31 职场文书
运动会广播稿200字
2014/01/15 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
golang定时器
2022/04/14 Golang