官方网址:http://loudev.com/

html:

<html>
<head>
<link href="path/to/multiselect.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
...
<option value='elem_100'>elem 100</option>
</select>
<script src="path/to/jquery.multi-select.js" type="text/javascript"></script>
</body>
</html>

JavaScript:

$('#my-select').multiSelect();
$('#my-select').multiSelect({ keepOrder: true });//按添加的先后排序

获取选中的值(移到右侧的值)的方法:

$('#my-select').val();

多选插件multiselect.js的更多相关文章

  1. 日期多选插件Kalendae.js

    在项目中要实现日期多选的功能,于是在网上找到Kalendae.js,此文主要记录本人对于Kalendae.js的一些用法,以便以后查阅,希望对读者也有所帮助 主要内容如下: Kalendaejs一句话 ...

  2. multiSelect 下拉多选插件

    multiSelect是一款很好用的下拉多选插件,可以在下拉框中实现多选框,全选及取消全选等方法.使用方法:1.引用 multiSelect.css及 multiSelect.js.下载地址 http ...

  3. select 自定义样式插件 selectize.js

    [特别推荐]几款极好的 JavaScript 下拉列表插件   表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让 ...

  4. jquery的全选插件

    全选看起来挺简单的,要做得完美就不那么容易了. 目前,我的全选插件能做到以下6点: 1.点击全选checkbox,能将要选择的checkbox都选中.去掉全选按钮,能将所有的checkbox都不选.这 ...

  5. javascript模板插件amaze.js

    摘要: 最近在开发项目时,异步接口需要前端渲染数据,js拼接太低级,必然要用模板插件.之前用过基于jQuery的和juicer等插件,考虑到以后公司项目上的统一,移动端和pc端上的统一,以及可维护性, ...

  6. jquery多级手风琴插件–accordion.js

    手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...

  7. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  8. MXBridge - 插件式JS与OC交互框架

    概述 MXBridge,提供一个插件式的JavaScript与Objective-C交互的框架,通过JavaScriptCore实现,插件式扩展Obejctive-C接口以供JavaScript调用. ...

  9. jQuery时间格式插件-moment.js的使用

    jQuery时间格式插件-moment.js的使用 moment.js插件的使用,使用之前在页面引入对应的js文件: 详细的操作可见moment中文官网:http://momentjs.cn/ 日期格 ...

随机推荐

  1. php程序猿面试分享

    面试总结 今天去了北京著名IT公司进行PHP程序猿的面试.这是人生第一次么,怎么不紧张?我是不是有病.不是.这叫自信呵. 首先是做一些笔试题. 1.mysql数据库索引使用的数据结构?这样做的优点是? ...

  2. [资料] Ceph存储系统,关于Redhat和Suse企业版存储知识汇总

    版权声明:很多其它内容,请关注[架构师技术联盟]公众号 https://blog.csdn.net/BtB5e6Nsu1g511Eg5XEg/article/details/81117091 wx_f ...

  3. 报错解决——make: *** No targets specified and no makefile found. Stop

    wget http://ftp.gnu.org/pub/gnu/ncurses/ncurses-5.6.tar.gz tar zxvf ncurses-5.6.tar.gz #切换目录到ncurses ...

  4. C# install-package:"xx"已拥有为“xxx”定义的依赖项

    可能 nuget自身的版本落后于适配程序包的版本 Visual Studio 2013 更新 NuGet 包管理器 Ø  前言 使用 Visual Studio 中的 NuGet 包管理器下载程序时, ...

  5. redis实现消息队列(七)

    1. 介绍 redis有一个数据类型叫list(列表),它的每个子元素都是 string 类型的双向链表.我们可以通过 push,pop 操作从链表的头部或者尾部添加删除元素.这使得 list 既可以 ...

  6. oracle添加字段,备注

    1.添加字段: alter table  表名  add (字段  字段类型)  [ default  '输入默认值']  [null/not null]  ; 2.添加备注: comment on ...

  7. get请求乱码解决

    1.修改tomcat的配置文件 <ConnectorURIEncoding="utf-8" connectionTimeout="20000" port= ...

  8. 【LeetCode每天一题】Permutations(排列组合)

    Given a collection of distinct integers, return all possible permutations. Example: Input: [1,2,3] O ...

  9. 20个Java练手项目,献给嗜学如狂的人

    给大家推荐一条由浅入深的JAVA学习路径,首先完成 Java基础.JDK.JDBC.正则表达式等基础实验,然后进阶到 J2SE 和 SSH 框架学习.最后再通过有趣的练手项目进行巩固. JAVA基础 ...

  10. 执行perl xttdriver.pl报错Can't locate Getopt/Long.pm in @INC

    环境:AIX 6.1 + Oracle 10.2.0.4 现象:在做xtts测试时,源环境使用Oracle自带的perl执行xttdriver.pl报错如下: $ $ORACLE_HOME/perl/ ...