http://blog.csdn.net/rosanu_blog/article/details/8550723

http://www.bkjia.com/jQuery/449193.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="多选列表框,jquery插件" />

<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />

<title>操作多选列表框</title>

<link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" />

<style type="text/css">

    .demo2{width:600px; margin:40px auto; color:#424242; background:#fff}

</style>

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>

<script type="text/javascript" src="jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="jquery.multiselect2side.js"></script>

<script type="text/javascript">

$(function(){

   $("#liOption").multiselect2side({

        selectedPosition: 'right',

        moveOptions: true,

        labelsx: '待选区',

        labeldx: '已选区'

   });

});

</script>

</head>

<body>

<div id="main">

    <form id="sel_form" action="posts.php" method="post">

     <div id="sel">

      <select name="abc" id='liOption' multiple='multiple' size='8' >

        <option value="PHP">PHP</option>

        <option value="MYSQL">MYSQL</option>

        <option value="ASP.NET">ASP.NET</option>

        <option value="XHTML">XHTML</option>

        <option value="CSS">CSS</option>

        <option value="JQUERY">JQUERY</option>

      </select>

     </div>

     <input type="submit" class="btn" value="提 交" />

     </form>

</div>

<!--<p id="stat"><script type="text/javascript" src="http://js.tongji.linezing.com/1870888/tongji.js"></script></p>-->

</body>

</html>

1.使用了1.9以上版本的jQuery时，jquery.multiselect2side.js会在执行时报如下错误：

jquery.multiselect2side.js:106 Uncaught TypeError: Cannot read property 'msie' of undefined。

所以必须加上jquery-migrate-1.2.1.min.js，它负责1.9以上版本jQuery的兼容问题。

2.查看页面源码会发现，右侧select的name等于左侧select的name加上ms2side__dx[]，这个后缀是自动加的。

multiselect2side：jQuery多选列表框插件的更多相关文章

  1. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  2. 使用jQuery开发messager消息框插件

    1.插件使用 首先引入jquery库,然后引入dialog.js.dialog.css.messager.js.messager.css,如下: <script type="text/ ...

  3. jQuery+css3弹出框插件

    先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var ...

  4. TIPSO--基于JQUERY的消息提示框插件，用起来蛮顺手

    项目产品经理要求, 呵呵,关于描述,十个字以内的,直接显示,多于十个字的,用消息框提示: 相关模板及JS如下: $(function() { $('.tip').tipso({ useTitle: f ...

  5. jQuery zxxbox弹出框插件(v3.0)

    插件地址: http://www.zhangxinxu.com/study/201009/jquery-zxxbox-v3-demo.html

  6. wxpython中列表框（ListBox类）、复选列表框（CheckListBox）、下拉选项（Choice）、进度条（Gauge）、滑块（Slider）使用实例源码分享

    #coding=utf-8 import wx import time class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(s ...

  7. jQuery实现列表框双向选择操作

    对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...

  8. 非常强大的jQuery万能浮动框插件

    支持hover, click, focus以及无事件触发:支持多达12种位置的定位,出界自动调整:支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等:可自定义装载容器:内置UI不错的 ...

  9. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

随机推荐

  1. 浅谈C#中的深拷贝(DeepCopy)与浅拷贝(MemberwiseClone)

    场景:MVVM模式中数据双向绑定,想实现编辑.保存.撤销操作时也双向绑定了,不能实现撤销操作. 后来通过搜索找到了继承IEditableObject接口实现撤销操作,但是对其中使用了Memberwis ...

  2. 如何让Composer的autoload支持自定义文件后缀名

    PHP的Composer工具规范了我们对系统各种资源库的加载格式,借助于PHP的自动加载机制,可以很大程度上简化在应用开发过程中的类库文件引用场景.但到目前为止,它有个不是问题的问题,就是文件后缀名只 ...

  3. [lsof]lsof查看哪些设备/文件被占用或者打开

    转自:http://blog.csdn.net/yuzhihui_no1/article/details/51767516 最近在查一个Bug,应用程序kill之后重启,总是会出现adc的设备open ...

  4. anconda使用---使用conda管理python环境

    一.动机 最近打算折腾vn.py,但只有py27版本的,因为一向习惯使用最新稳定版的,所以不得不装py27的环境,不得不说 Python的全局锁真的很烦. 身为懒癌患者,必然使用全功能的anacond ...

  5. IDEA快捷键笔记

    Keymap:Mac OS X idea快速清除无用的引用:command+alt+o 跳转: 不同窗口之间的跳转(Next project window): alt + command + ] Pr ...

  6. javascript显示年月日时间代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. C++中，int a = 10的后面的操作

    在C++中,int a = 10的内存表现形式取决于你的具体代码和优化级别,主要的几种形式: 不存在于内存中.比如a从未改变,被编译器当成常量,所有代码中的a直接替换成10: 存在于寄存器中:比如对a ...

  8. GLSL着色语言学习。橙皮书第一个例子GLSL+OpenTK+F#的实现。

    Opengl红皮书有选择的看了一些,最后的讲着色语言GLSL的部分看的甚为不理解,然后找到Opengl橙皮书,然后就容易理解多了. 在前面,我们或多或少接触到Opengl的处理过程,只说前面一些处理, ...

  9. 【Html】div 加载 html页面的方法

    做网页的单页面应用时,需要在一个HTML的Div元素中加载另一个HTML页面,以前有一种方法就是用iframe,举例如下:(亲测可行) <div class="main-contain ...

  10. Java如何获取正在运行的线程的名称？

    在Java编程中,如何获取正在运行的线程的名称? 以下示例显示如何获取正在运行的线程的名称. package com.yiibai; public class GettingThreadName ex ...