效果图如下：

实现功能：点击第一个按钮，让选中的对象从左边移动到右边；

　　　　　点击第二个按钮，让左边的所有对象移动到右边；

　　　　　点击第三个按钮，让选中的对象从右边边移动到左边；

　　　  　点击第四个按钮，让右边的所有对象移动到左边。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>

        <title>新建网页</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="description" content="" />

        <meta name="keywords" content="" />

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

        <style type="text/css">

        select{width:130px; height:220px;}

        </style>

        <script>

        //$(selector).append(content) ：将content追加到selector选择器内部的最后面

        // $(content).appendTo(selector)：将content追加到selector选择器内部的最后面 

        $(function  () {                                      //当页面加载完成时；

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

                    	$(this).appendTo($(this).parent().siblings('select'));

                    });

    				$("input").eq(0).click( function () {        //按下第一个按钮，触发函数

                    	$("#hebei>option:selected").appendTo($("#henan"));  //把选中的option移动到henan的下拉列表中

                     });

                  $("input").eq(1).click( function () {       //按下第二个按钮，触发函数

                         $("#hebei>option").appendTo($("#henan"));  //把hebei的option全部移动到henan的下拉列表中

                     });

                  $("input").eq(2).click( function () {      //按下第三个按钮，触发函数

                    	 $("#henan>option:selected").appendTo($("#hebei")); //把选中的option移动到hebei的下拉列表中

                     });

                    $("input").eq(3).click( function () {    //按下第四个按钮，触发函数

                         $("#henan>option").appendTo($("#hebei")); //把henan的option全部移动到hebei的下拉列表中

                     });

        });

        </script>

    </head>

    <body>

        <select id="hebei" multiple="multiple">

            <option>石家庄</option>

            <option>保定</option>

            <option>邯郸</option>

            <option>邢台</option>

            <option>衡水</option>

        </select>

        <select id="henan" multiple="multiple">

            <option>郑州</option>

            <option>开封</option>

            <option>洛阳</option>

            <option>周口</option>

            <option>信阳</option>

        </select><br /><br />

        <input type="button" value="-->">

        <input type="button" value="==>" >

        <input type="button" value="<--" >

        <input type="button" value="<==" >

    </body>

</html>

　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>

        <title>新建网页</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="description" content="" />

        <meta name="keywords" content="" />

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

        <style type="text/css">

        select{width:130px; height:220px;}

        </style>

        <script>

        //$(selector).append(content) ：将content追加到selector选择器内部的最后面

        // $(content).appendTo(selector)：将content追加到selector选择器内部的最后面 

        $(function  () {                                      //当页面加载完成时；

                 $("input").eq(0).click( function () {        //按下第一个按钮，触发函数

                         var n =  $("#hebei")[0].selectedIndex;  //获取被选中的option的下标n

                        $("#hebei>option").eq(n).appendTo($("#henan"));  //把下标为n的option移动到henan的下拉列表中

                     });

                  $("input").eq(1).click( function () {       //按下第二个按钮，触发函数

                         $("#hebei>option").appendTo($("#henan"));  //把hebei的option全部移动到henan的下拉列表中

                     });

                  $("input").eq(2).click( function () {      //按下第三个按钮，触发函数

                         var n =  $("#henan")[0].selectedIndex;  //获取被选中的option的下标n

                         $("#henan>option").eq(n).appendTo($("#hebei")); //把下标为n的option移动到hebei的下拉列表中

                     });

                    $("input").eq(3).click( function () {    //按下第四个按钮，触发函数

                         $("#henan>option").appendTo($("#hebei")); //把henan的option全部移动到hebei的下拉列表中

                     });

        });

        </script>

    </head>

    <body>

        <select id="hebei" multiple="multiple">

            <option>石家庄</option>

            <option>保定</option>

            <option>邯郸</option>

            <option>邢台</option>

            <option>衡水</option>

        </select>

        <select id="henan" multiple="multiple">

            <option>郑州</option>

            <option>开封</option>

            <option>洛阳</option>

            <option>周口</option>

            <option>信阳</option>

        </select><br /><br />

        <input type="button" value="-->">

        <input type="button" value="==>" >

        <input type="button" value="<--" >

        <input type="button" value="<==" >

    </body>

</html>

　　

JQ写下拉列表项目移动（内附效果图和源代码）的更多相关文章

  1. JQ写简单的伸缩菜单（内附效果图和源代码）

    效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. VC/Wince 实现仿Win8 Metro风格界面2——页面滑动切换（附效果图）

    前几天开始写仿Win8 Metro界面文章,部分网友觉得不错,感谢各位的意见.本来今天一直在折腾Android VLC播放器,没时间写.不过明天休息,所以今天就抽时间先写一下. 言归正传,我们都知道W ...

  3. VC/Wince 实现仿Win8 Metro风格界面1——设计概述和自绘Button(附效果图)

    去年用VC做了一个仿Win8 Metro风格的界面,感觉挺有意思,最近打算把实现过程和一些技术原理记录下来. 主要是风格上类似Win8,其实功能上很多借鉴了Android的操作方式.界面只支持两种大小 ...

  4. MIT挑战（如何在12个月内自学完成MIT计算机科学的33门课程|内附MIT公开课程资源和学习顺序

    译者注:本文译自Scott H. Young的博客,Scott拥有超强的学习能力,曾在12个月内自学完成麻省理工学院计算机科学的33门课程.本文就是他个人对于这次MIT挑战的介绍和总结. 版权声明:本 ...

  5. 聊聊第一个开源项目（内网穿透） - CProxy

    文章首发:聊聊第一个开源项目 - CProxy 作者:会玩code 初衷 最近在学C++,想写个项目练练手.对网络比较感兴趣,之前使用过ngrok(GO版本的内网穿透项目),看了部分源码,想把自己的一 ...

  6. 电机噪声之谐波分析（内附simulink中FFT分析的相关参数配置与解析）

    电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析) 目录 电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析) 写在前面 正文 电机噪声 谐波的产生 什么 ...

  7. 从零开始学数据分析，什么程度可以找到工作？（ 内附20G、5000分钟数据分析工具教程大合集 ）

    从零开始学数据分析,什么程度可以找到工作?( 内附20G.5000分钟数据分析工具教程大合集 )   我现在在Coursera上面学data science 中的R programming,过去很少接 ...

  8. 最近在用placeholder ,是已有的，网上也有不少都是jq写的

    其实除了支持placeholder 的浏览器,其他用js 或jq实现的都不叫placeholder 效果,只能算上是获取焦点,或失去焦点时的一个placeholder 没有出生时就已经存在效果 很多人 ...

  9. 第03篇. 标准Web项目Jetty9内嵌API简单启动

    一直以来,想改变一些自己早已经习惯的事情. 到了一定年龄,便要学会寡言,每一句话都要有用,有重量. 喜怒不形于色,大事淡然,有自己的底线. --胖先生 昨天,简单的说了一下关于Jetty9的配置,大家 ...

随机推荐

  1. gif 图片制作和拆解

    http://app.baidu.com/app/enter?appid=120980 gif 制作http://app.baidu.com/app/enter?appid=143534 gif 分解

  2. Mysql5.5命令行修改密码

    今天下载了mysql5.5.45免安装版,配置好之后发现mysql默认是没有设置密码的,也就是密码为空. 如果是本机作开发测试用,有无密码倒也无所谓,不过发布在服务器上没有密码肯定是不行的,那就需要设 ...

  3. 为什么Visual Studio的安装目录下有名为1033或2052的文件夹？

    一直不清楚MS诸多产品的安装目录下为什么总有个名为1033或者2052的目录 搜索一下才知道,原来叫 LCID(Locale ID,区域性标识符) 常见的如:1033表示英语(美国),2052表示中文 ...

  4. JQuery-属性

    // attr能访问到的都是html里面的样式,诸如内联样式.外部样式和外联样式该方法访问不到 $('#div1').width('400px') // 这个用来改样式css $("#div ...

  5. 连接mysql问题 mysqlnd cannot connect to MySQL 4.1+ using old authentication

    第一篇:PHP5.3开始使用MySqlND作为默认的MySql访问驱动,而且从这个版本开始将不再支持使用旧的用户接口链接Mysql了,你可能会看到类似的提示: #2000 - mysqlnd cann ...

  6. struts2：数据校验，通过XWork校验框架实现（validation.xml）

    根据输入校验的处理场所的不同,可以将输入校验分为客户端校验和服务器端校验两种.服务器端验证目前有两种方式: 第一种: 参考:struts2:数据校验,通过Action中的validate()方法实现校 ...

  7. AngularJS Best Practices: ASP.NET MVC Directory Structure

    /Content----- images/ // Images for your app----- css/ // Styles for your app/Scripts----- libs/ // ...

  8. DuiLib事件分析（一）——鼠标事件响应

    最近在处理DuiLib中自定义列表行元素事件,因为处理方案得不到较好的效果,于是只好一层一层的去剥离DuiLib事件是怎么来的,看能否在某一层截取消息,自己重写. 我这里使用CListContaine ...

  9. 由FutureTask的get方法靠什么机制来阻塞引发的思考

    1. FutureTask的get方法靠什么机制来阻塞 看其get方法源码: /** * @throws CancellationException {@inheritDoc} */ public V ...

  10. Java －－ 在Eclipse上使用Spring

    在.NET上用的VS.NET+Spring.net+Nhibernate,到了Java平台上,自然对应着Eclipse+Spring+Hibernate.上一篇文章介绍了如何在Eclipse上使用Hi ...