<!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=gb2312" />

    <title>demo</title>

    <script src="jquery-1.4.4.min.js"></script>

    <script>

    $(function(){

        //选择一项

        $("#addOne").click(function(){

            $("#from option:selected").clone().appendTo("#to");

            $("#from option:selected").remove();

        });

        //选择全部

        $("#addAll").click(function(){

            $("#from option").clone().appendTo("#to");

            $("#from option").remove();

        });

        //移除一项

        $("#removeOne").click(function(){

            $("#to option:selected").clone().appendTo("#from");

            $("#to option:selected").remove();

        });

        //移除全部

        $("#removeAll").click(function(){

            $("#to option").clone().appendTo("#from");

            $("#to option").remove();

        });

        //移至顶部

        $("#Top").click(function(){

            var allOpts = $("#to option");

            var selected = $("#to option:selected");

            if(selected.get(0).index!=0){

                for(i=0;i<selected.length;i++){

                   var item = $(selected.get(i));

                   var top = $(allOpts.get(0));

                   item.insertBefore(top);

                }

            }

        });

        //上移一行

        $("#Up").click(function(){

            var selected = $("#to option:selected");

            if(selected.get(0).index!=0){

                selected.each(function(){

                    $(this).prev().before($(this));

                });

            }

        });

        //下移一行

        $("#Down").click(function(){

            var allOpts = $("#to option");

            var selected = $("#to option:selected");

            if(selected.get(selected.length-1).index!=allOpts.length-1){

                for(i=selected.length-1;i>=0;i--){

                   var item = $(selected.get(i));

                   item.insertAfter(item.next());

                }

            }

        });

        //移至底部

        $("#Buttom").click(function(){

            var allOpts = $("#to option");

            var selected = $("#to option:selected");

            if(selected.get(selected.length-1).index!=allOpts.length-1){

                for(i=selected.length-1;i>=0;i--){

                   var item = $(selected.get(i));

                   var buttom = $(allOpts.get(length-1));

                   item.insertAfter(buttom);

                }

            }

        });

    });

    </script>

  </head>

<body>

<table align="center" width="288" border="0" cellpadding="0" cellspacing="0">

    <tr>

        <td colspan="4">

            <select name="from" id="from" multiple="multiple" size="10" style="width:100%">

                <option value="1">选项1</option>

                <option value="2">选项2</option>

                <option value="3">选项3</option>

                <option value="4">选项4</option>

                <option value="5">选项5</option>

                <option value="6">选项6</option>

                <option value="7">选项7</option>

            </select>

        </td>

        <td align="center">

            <input type="button" id="addAll" value=" >> " style="width:50px;" /><br />

            <input type="button" id="addOne" value=" > " style="width:50px;" /><br />

            <input type="button" id="removeOne" value="&lt;" style="width:50px;" /><br />

            <input type="button" id="removeAll" value="&lt;&lt;" style="width:50px;" /><br />

        </td>

        <td colspan="4">

            <select name="to" id="to" multiple="multiple" size="10" style="width:100%">

            </select>

        </td>

        <td align="center">

            <input type="button" id="Top" value="置顶" style="width:50px;" /><br />

            <input type="button" id="Up" value="上移" style="width:50px;" /><br />

            <input type="button" id="Down" value="下移" style="width:50px;" /><br />

            <input type="button" id="Buttom" value="置底" style="width:50px;" /><br />

        </td>

    </tr>

</table>

</body>

</html>

JQuery MultiSelect（左右选择框）的更多相关文章

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

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

  2. jquery 下拉选择框/复选框常用操作

    通常 1.我们需要获取select中选中的值,可以使用: $("#selectID").find("option:selected").val();  --一般 ...

  3. js：jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jquery.multiselect 多选下拉框实现

    第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的 ...

  5. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  6. 用jquery修改默认的单选框radio或者复选框checkbox选择框样式

    默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...

  7. ul+jquery自定义下拉选择框

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

  9. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  10. jQuery左右选择框

    <!DOCTYPE html> <html> <head> <title>左右选择框</title> <style type=&quo ...

随机推荐

  1. U-Boot命令大全（功能参数及用法）

    U-Boot上电启动后,按任意键可以退出自动启动状态,进入命令行. U-Boot 2010.03 (Sep 25 2011 - 16:18:50)     DRAM: 64 MB     Flash: ...

  2. 转载：C#中的Invoke理解一

    在用.NET Framework框架的WinForm构建GUI程序界面时,如果要在控件的事件响应函数中改变控件的状态,例如:某个按钮上的文本原先叫“打开”,单击之后按钮上的文本显示“关闭”,初学者往往 ...

  3. winform 打印控件

    (1)PageSetupDialog1    打印设置窗口  (2)PrintDocument     向打印机输送的对象 事件:PrintPage   对于打印的每一页都执行一次 (3)PrintP ...

  4. ArcGIS AddIN 之 DockPanel 界面空白

    辛辛苦苦写了个AddIn插件,自己用一切正常,发给别人就弹不出DockPanel, 或者弹出时只有Panel,没有具体的控件.经多次排查,原因是: 使用了第三方的界面控件DotNetBar,开发环境中 ...

  5. 【HDU 4747 Mex】线段数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4747 题意:有一组序列a[i](1<=i<=N), 让你求所有的mex(l,r), mex ...

  6. canvas的默认尺寸

    canvas一直就是偶尔看看,随便画点小东西,没有认真琢磨过,今天打算认真的从头学一下,画线的时候感觉坐标不太正常,后来发现,canvas有自己的默认尺寸 写法如下 <canvas id=&qu ...

  7. 【java基础学习】GUI

    GUI 容器 布局管理器 组件 菜单 事件处理机制

  8. Android 网络通信框架Volley简介

    1.1. Volley引入的背景在以前,我们可能面临如下很多麻烦的问题. 比如以前从网上下载图片的步骤可能是这样的流程: 在ListAdapter#getView()里开始图像的读取. 通过Async ...

  9. 《Linux内核分析》第六周 读书笔记

    <Linux内核设计与实现>CHAPTER3阅读梳理 [学习时间:3hours] [学习内容:进程的描述:进程的生命周期(包括创建.终结)] 一.进程(任务)描述 1.进程是处于执行期的程 ...

  10. 《Linux内核设计与实现》CHAPTER5阅读梳理

    <Linux内核设计与实现>CHAPTER5阅读梳理 [学习时间:2.5hours] [学习内容:系统调用的概念.功能及实现:系统调用的创建和使用方法] CHAPTER5 系统调用 1.系 ...