应用场景：左侧是已有商品，右侧是未有商品，选择其中的内容点击箭头即可互换：

点击大箭头则全部内容去另一边，或者双击已有商品的选项也会加入右边：

代码实现：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>下拉列表左右选择</title>

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

        <script>

            $(function() {

                /*1.选中单击去右边*/

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

                    $("#left option:selected").appendTo($("#right"));

                });

                /*2.单击全部去右边*/

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

                    $("#left option").appendTo($("#right"));

                });

                /*3.选中双击去右边*/

                $("#left option").dblclick(function() {

                    $("#left option:selected").appendTo($("#right"));

                });

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

                    $("#right option:selected").appendTo($("#left"));

                });

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

                    $("#right option").appendTo($("#left"));

                });

                $("#right option").dblclick(function() {

                    $("#right option:selected").appendTo($("#left"));

                });

            });

        </script>

    </head>

    <body>

        <table border="1" width="600" align="center">

            <tr>

                <td>

                    分类名称

                </td>

                <td>

                    <input type="text" name="cname" value="手机数码" />

                </td>

            </tr>

            <tr>

                <td>

                    分类描述

                </td>

                <td>

                    <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>

                </td>

            </tr>

            <tr>

                <td>

                    分类商品

                </td>

                <td>

                    <span style="float: left;">

                        <font color="green" face="宋体">已有商品</font><br/>

                        <select multiple="multiple" style="width: 100px;height: 200px;" id="left">

                            <option>IPhone6s</option>

                            <option>小米4</option>

                            <option>锤子T2</option>

                        </select>

                        <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">&gt;&gt;</a></p>

                        <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">&gt;&gt;&gt;</a></p>

                    </span>

                    <span style="float: right;">

                        <font color="red" face="宋体">未有商品</font><br/>

                        <select multiple="multiple" style="width: 100px;height: 200px;" id="right">

                            <option>三星Note3</option>

                            <option>华为6s</option>

                        </select>

                        <p><a href="#" id="selectOneToLeft">&lt;&lt;</a></p>

                        <p><a href="#" id="selectAllToLeft">&lt;&lt;&lt;</a></p>

                    </span>

                </td>

            </tr>

            <tr>

                <td colspan="2">

                    <input type='submit' value="修改" />

                </td>

            </tr>

        </table>

    </body>

</html>

jQuery应用实例4：下拉列表的更多相关文章

  1. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  2. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  3. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  4. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  5. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  6. jQuery 验证实例(shopnc二次开发)

    shopnc 商家用户实现添加用户与前台用户分离, jQuery 验证实例 equalTo:等于 <div id="saleRefund" show_id="1&q ...

  7. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  8. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. JQuery+Ajax实战三级下拉列表联动（八）

    本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...

  10. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

随机推荐

  1. 使用swiper插件，隐藏swiper后再显示，不会触发自动播放的解决办法

    问题: 项目中有一个需求,当点击P1时,两个页面进行轮播.当点击P2时,页面不轮播. 设置好以后,点击P2,再点击P1,此时页面不能自动轮播,只能手动触发. 解决: 在轮播器配置里,配置observe ...

  2. (转)SQL SERVER 生成建表脚本

    https://www.cnblogs.com/champaign/p/3492510.html /****** Object: StoredProcedure [dbo].[GET_TableScr ...

  3. 安装SourceTree工具，无需注册就可以正常使用SourceTree

    1. 下载SourceTree安装包 2. 双击安装包进行安装,默认会直接安装在系统盘,此时桌面就会SourceTree的快捷键 3. 双击打开桌面的SourceTree,就会提示让你安装授权,那么接 ...

  4. 项目（二）DNS解析——配置域名服务器

    NDS服务器常见种类有:缓存域名服务器.主域名服务器.从域名服务器.DNS服务器查询方法有两种:递归查询和迭代查询.其中,递归查询是DNS服务器在本地通过缓存.本地映射.记录本得到结果,而迭代查询是D ...

  5. Binary Space Partitioning

    [Binary Space Partitioning] BSP was discovered by John Carmack used BSP trees in Doom and Quake. Alt ...

  6. 20175126《Java程序设计》第一周学习总结

    # 学号 20175126 <Java程序设计>第一周学习总结   ## 教材学习内容总结   - 1.安装了WINDOS系统的JDK,并学会了利用JDK编写并编译JAVA程序的基本方法. ...

  7. python note 01 计算机基础与变量

    1.计算机基础. 2.python历史. 宏观上:python2 与 python3 区别: python2 源码不标准,混乱,重复代码太多, python3 统一 标准,去除重复代码. 3.pyth ...

  8. [leetcode]84. Largest Rectangle in Histogram直方图中的最大矩形

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...

  9. [leetcode]26. Remove Duplicates from Sorted Array有序数组去重(单个元素只出现一次)

    Given a sorted array nums, remove the duplicates in-place such that each element appear only once an ...

  10. Vim中YouCompleteMe插件安装

    背景 YouCompleteMe需要使用GCC进行编译,然而Centos 6.7默认的GCC版本太低,所以需要使用devtools-2,用来安装多个版本GCC手动编译安装GCC的坑简直不要太多(类似于 ...