说不清楚，直接上图

<!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. 值得一看：利用对标帮助客户进行GAP分析，找到业务发展方向！

    最好是跟CBM一起来使用.   Presentation Here: https://ibm.biz/BdXJrQ CAN ONLY ACCESS at IBM internal.

  2. “You must not call setTag() on a view Glide is targeting” 解决

    报错原因大致是因为Glide加载的iamgeView调用了setTag()方法导致的错误, 因为Glide已经默认为ImageView设置的Tag. 解决办法:自定义一个Application,在里面 ...

  3. C#记录对象的变化

    经常,我们会遇到一个场景,在保存对象到数据库之前,对比内存对象和数据库值的差异. 下面我写了一种实现,为保存定义一个事件,然后自动找出对象之间的差异,请注意,并没有通过反射的方式去获取每个属性及其值. ...

  4. C#调用JAVA接口WSSE方式用WebClient方式

    C#读取JAVA的WSSE接口的调用代码: 用webclient 方式: /// <summary> /// 调用java cxf ws_security加密的服务wcf客户端对应的加密类 ...

  5. Embedding Python in C

    http://codextechnicanum.blogspot.com/2013/12/embedding-python-in-c-converting-c.html //Make some vec ...

  6. NFC 与 Windows Phone 的那点事儿

    说起NFC这个词儿应该已经不陌生了,在我们的生活中有很多使用场景都是使用的这项技术,例如公交卡,门禁,还有银联的闪付卡等等.并且近些年在移动设备上使用的场景也越来越多,例如 对 NFC TAG 的读写 ...

  7. 各种UserAgent的列表

    User Agent是浏览器用于 HTTP 请求的用户代理头的值.更换User Agent能更好的模拟出不同的系统和浏览器信息. Android Name User Agent Nexus 7 (Ta ...

  8. linux下批量查找/替换文本内容

    一般在本地电脑上批量替换文本有许多工具可以做到,比如sublime text ,但大多服务器上都是无图形界面的,为此收集了几条针对linux命令行 实现批量替换文本内容的命令: 1.批量查找某个目下文 ...

  9. netty ByteToMessageDecoder 分析

    ByteToMessageDecoder 1.socket 移除时触发,最后次读数据处理 @Override public final void handlerRemoved(ChannelHandl ...

  10. angularjs + seajs构建Web Form前端(三) -- 兼容easyui

    回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使用,对于angular也有了初步的认识,接下来的内容只会对angular的一些用法做简单的 ...