说不清楚，直接上图

<!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. WPF TextBox自动滚动到最户一行

    textBox经常用来显示程序的运行状态或者消息,如何让他自动滚动呢? 在显示消息代码下加一条自动滚动到底部的语句即可: TextBox1.ScrollToEnd(); (如果要显示垂直滚动条设置Ve ...

  2. 通过transform属性改变图片的位置大小等信息

    对UIImageView的位置大小方向的改变可以通过改变其transform属性值实现. 位置改变: var transform = CGAffineTransformMakeTranslation( ...

  3. FFRPC应用之Client/Server

    摘要: Ffrpc 进行了重构,精简了代码,代码更加清晰简洁,几乎完美的达到了我的预想.接下来将写几遍文章来介绍ffrpc可以做什么.简单总结ffrpc的特性是: Ffrpc是c++ 网络通信库 全异 ...

  4. JVM内存溢出及合理配置

    Tomcat本身不能直接在计算机上运行,需要依赖于硬件基础之上的操作系统和一个Java虚拟机.Tomcat的内存溢出本质就是JVM内存溢出,所以在本文开始时,应该先对Java JVM有关内存方面的知识 ...

  5. spring 集成 Hibernate4.3.X org.hibernate.service.jta.platform.spi.JtaPlatform异常

    使用Spring3.2.4集成Hibernate4.3.5时,出现以下异常 Causedby:java.lang.ClassNotFoundException:org.hibernate.servic ...

  6. Android M Permission 学习笔记

    Android应用权限简要介绍 一个Android应用默认情况下是不拥有任何权限的, 这即是说, 在默认情况下, 一个应用是没有权利去进行一些可能会造成不好影响的操作的. 这些不好的影响可能是对其它应 ...

  7. Ubuntu 16.04 LTS更新

    Canonical今天正式发布了新版的Ubuntu系统,针对PC.笔记本.上网本.平板和智能手机各类设备.这次的Ubuntu 16.04代号为Xenial Xerus——这个代号是由Canonical ...

  8. vxworks下网络编程一：网络字节序问题

    inet_addr("192.168.1.1");//返回网络字节序整型ip地址inet_ntoa(saddr);//将包含网络字节序整型ip地址的in_addr对象转换成本地ch ...

  9. Github的基本配置与使用

    第一步:尝试创建SSH key ssh-keygen -t rsa -C xxxxx@gmail.com 默认在~/.ssh目录生成id_rsa与id_rsa.pub. -t代表密钥类型,常见的类型有 ...

  10. 安卓开发笔记——自定义HorizontalScrollView控件（实现QQ5.0侧滑效果）

    对于滑动菜单栏SlidingMenu,大家应该都不陌生,在市场上的一些APP应用里经常可以见到,比如人人网,FaceBook等. 前段时间QQ5.0版本出来后也采用了这种设计风格:(下面是效果图) 之 ...