Jquery多选下拉列表插件jquery multiselect功能介绍及使用_jquery

有一个多选的需求,在网上找到了这个插件:multiselect
https://github.com/ehynds/jquery-ui-multiselect-widget
csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵!

先简单说说这个插件:
jquery-multiselect 基于Jquery-ui的组件体系。
所以使用它的时候,先得导入jquery-ui相关的js和css哦
特性
•支持点击label实现checkbox组选择.
•头部选项,如全选/ 取消全选 /关闭功能.
•支持键盘选择.
•支持5种不同的事件回调函数.
•以列表方式显示选中项目,并且可以设置最大显示值.
•方便改变位置,渐变速度,滚动容器的高度,链接文字,文本框默认内容等.
效果如图:

上图效果的代码:
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一下这个插件哦!很简单地说!
首先声明一个变量用来记录选中的值列表,截个图:
 
然后我们会发现源码里有一个update方法,这个方法是用来获取用户选中项的文本,呵呵,于是乎我们想到了,简单DIY一下:

然后在代码中添加一个方法:

复制代码 代码如下:

MyValues:function(){
return multiValues;
}

ok,对插件的DIY完成了。下面是页面上调用喽:

复制代码 代码如下:

function showValues() {
var valuestr = $("#sela").multiselect("MyValues");
alert(valuestr);
}

Yeah,OK啦!
Diy的代码和Demo见附件。

时间: 2024-11-08 19:46:28

Jquery多选下拉列表插件jquery multiselect功能介绍及使用_jquery的相关文章

控件-怎么设置Jquery 多选下拉列表插件jquery multiselect 的高度?

问题描述 怎么设置Jquery 多选下拉列表插件jquery multiselect 的高度? 企业的代码是 .multiselect(); 库有用到jquery.jqueryui.jquery multiselect 试过在方法中,加height,minheight,但这个高度改变的是下拉列表的高度,不是控件的高度. 要怎么改变控件本身的高度呢? 控件的源码是 $.widget("ech.multiselect", { // default options options: { he

jQuery弹出下拉列表插件(实现kindeditor的@功能)_jquery

这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样).在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求,于是我决定在该插件上改良,主要是下面几点: 1. @内容的输入,能够匹配多个属性值. 2. 选中列表值后,是成块插入kindeditor的(方便删除,也利于区分文本). 3. 修正输入偶数关键字@功能失效问题. 前言 在一开始,我用bootstrap-suggest(https://github.

js文件-Jquery多选下拉列表怎么实现

问题描述 Jquery多选下拉列表怎么实现 导入了multiselect插件,按照网上的方法去写,但是会发生错误 错误是这个无法找到!图片说明 页面效果也变成了这样 需要用到的js文件也导入了,求大神解答 下面的是页面的代码 解决方案 引入jQuery UI了吗?

jQuery实现邮箱下拉列表自动补全功能_jquery

记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填写邮箱名字,出现下拉列表,自动补全邮箱 •点击上下按键,选取下拉列表邮箱 •按回车键,选中列表内容,隐藏下拉列表 •鼠标经过,下拉列表选项设置为高亮 •鼠标点击,选中下拉列表选项,隐藏下拉列表 HTML HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签. <ht

asp.net jquery无刷新分页插件(jquery.pagination.js)_实用技巧

采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

jQuery显示隐藏密码插件jquery.toggle-password演示

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>jQuery显示隐藏密码插件jquery.toggle-password演示_dowebok</title> <style> * { margin: 0; padding: 0; } body { font: 14px Arial, san

jquery弹出框插件jquery.ui.dialog用法分析_jquery

本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

基于jQuery插件的页面功能介绍引导页示例

新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. 查看演示 下载源码 之前也有相关文章介绍:<构建一个用于产品介绍的WEB应用>,相信对有需要的朋友有帮助.本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它. HTML 首先记得加载所需的css文件和jQuery库文件,以及pagewalkthrough插件.   <!

jquery事件机制扩展插件 jquery鼠标右键事件。_jquery

jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用. jQuery的插件主要分3种类型 1.封装对象方法的插件 (这种