说不清楚，直接上图

<!DOCTYPE html>

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

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        div.centent {

            float: left;

            text-align: center;

            margin: 10px;

        }

        span {

            display: block;

            margin: 2px 2px;

            padding: 4px 10px;

            background: #898989;

            cursor: pointer;

            font-size: 12px;

            color: white;

        }

    </style>

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

    <script>

        $(function () {

            $("#add").click(function () {//单个添加

                var $options = $("#select1 option:selected");

                $options.appendTo("#select2");

            });

            $("#add_all").click(function () {//全部添加

                $("#select1 option").each(function () {

                    $(this).appendTo("#select2");

                    /*

                    也可以写为：

                    var p=$("#select1 option");

                    p.appendTo("#select2");

                    */

                });

            });

            $("#remove").click(function () {//同上，只不过方向相反

                var $options = $("#select2 option:selected");

               // var $remove = $options.remove();

                $options.appendTo("#select1");

            });

            $("#remove_all").click(function () {//同上，只不过方向相反

                var p = $("#select2 option");

                p.appendTo("#select1");

            });

        });

    </script>

</head>

<body>

    <div class="centent">

        <select multiple id="select1" style="width:100px;height:160px">

            <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>

        </select>

        <div>

            <span id="add">选中添加到右边&gt;&gt;</span>

            <span id="add_all">全部添加到右边&gt;;&gt;</span>

        </div>

    </div>

    <div class="centent">

        <select multiple id="select2" style="width:100px;height:160px"></select>

        <div>

            <span id="remove">&lt;&lt;选中删除到左边</span>

            <span id="remove_all">&lt;&lt;全部删除到左边</span>

        </div>

    </div>

</body>

</html>

jquery实现下拉框功能的更多相关文章

  1. JQuery实现的 checkbox 全选；<select>下拉框功能

    1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...

  2. jquery 获取下拉框 某个text='xxx'的option的属性 非选中 如何获得select被选中option的value和text和......

    jquery 获取下拉框 某个text='xxx'的option的属性 非选中 5 jquery 获取下拉框 text='1'的 option 的value 属性值 我写的var t= $(" ...

  3. jquery对下拉框的操作

     jQuery对下拉框的操作 /获取第一个option的值 $('#test option:first').val(); //最后一个option的值 $('#test option:last').v ...

  4. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集，ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

  5. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  6. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  7. jquery 获取下拉框值与select text

    下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...

  8. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  9. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

随机推荐

  1. 安装 LuaSocket

    如果你安装有 Lua 模块的安装和部署工具 -- LuaRocks,那么一条指令就能安装部署好 LuaSocket: luarocks install luasocket  

  2. Mysql数据备份与恢复

    REM INIT→既に指定したファイルが有った場合, 上書きする REM NORECOVERY→接続先データベースへの既存の接続を閉じる REM REPLACE→既存のデータベースを上書きする set ...

  3. Redrain个人维护并使用的DuiLib和UiLib库源代码下载地址

    转载请说明原出处:http://blog.csdn.net/zhuhongshu/article/details/40740353,谢谢~~ 首先说明一下Duilib和Uilib的差别:UiLIb是D ...

  4. No Assistant Results

    由于修改一些文件名字等会导致这个不工作. "Organizer" / "Projects" / 选择你的项目.  "Delete" .

  5. iOS：基于AVPlayer实现的视频播放器

    最近在学习AVFoundation框架的相关知识,写了一个基于AVPlayer的视频播放器,相关功能如下图: 代码github:https://github.com/wzpziyi1/VideoPla ...

  6. winedt设置自动显示行号[latex]

    options--preferences--appearance 在show line numbers for modes下面的文本框里添加;Tex 这样新建或者打开tex文件的时候就自动显示行号了( ...

  7. CGContext 的一些工具方法

    /* *设置虚线 *param context CGContext *param context CGContext *param lineDashLengths 如: const CGFloat l ...

  8. nginx url自动加斜杠的问题

    nginx url自动加斜杠问题及301重定向 时间:2016-02-04 15:14:28来源:网络 导读:nginx url自动加斜杠问题及301重定向,URL指向一个目录并且在最后没有包含斜杠, ...

  9. 字符集与Mysql字符集处理（二）

    接着上篇文章继续讲字符集的故事.这一篇文章主要讲MYSQL的各个字符集设置,关于基础理论部分,参考于这里.   1. MYSQL的系统变量 – character_set_server:默认的内部操作 ...

  10. (译)ECMAScript 5 Objects and Properties (二)

    继 (译)ECMAScript 5 Objects and Properties 全文地址 http://ejohn.org/blog/ecmascript-5-objects-and-propert ...