1、需求：实现以下功能

2、步骤分析：

第一步：确定事件(鼠标单击事件click)

第二步：获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]

第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)

3、具体代码实现：

 <!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"));

                 });

             });

         </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>IPhone7</option>

                             <option>小米5X</option>

                             <option>荣耀V9</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>OPPO R11</option>

                             <option>华为Nova2 Plus</option>

                         </select>

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

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

                     </span>

                 </td>

             </tr>

             <tr>

                 <td colspan="2">

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

                 </td>

             </tr>

         </table>

     </body>

 </html>

在谷歌浏览器内运行，就能实现需求中所要的功能。

jQuery学习(七)——使用JQ完成下拉列表左右选择的更多相关文章

  1. jQuery学习(六)——使用JQ完成省市二级联动

    1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...

  2. jquery学习笔记2——jq效果

    一.显示隐藏: 可以使用show()和hide()方法来显示隐藏: $("#hide").click(function(){ $("p").hide(); }) ...

  3. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  4. jQuery学习(二)——使用JQ完成页面定时弹出广告

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五 ...

  5. jquery学习笔记3——jq HTML

    jQuery最常用的部分就是操作DOM,jQuery提供了一系列操作DOM的相关方法,使其很容易: 一.获取 1.获取内容 text()方法    设置或返回所选元素的文本内容: html()方法   ...

  6. jquery 学习(七) - 常用动态效果

    <!--转载于 听说你的代码很6--><!--http://www.jq22.com/webqd2377--> CSS <style> #content #firs ...

  7. jQuery学习(八)——使用JQ插件validation进行表单校验

    1.官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 目录结构: 2.引入jquery库和validation插件 ...

  8. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  9. jquery学习笔记3 jq遍历

    遍历方式:向上(父级元素)  向下(子元素)    水平(同胞元素) 一.向上遍历 parent()      向上一级   放回被选元素的直接父元素 parents()          返回被选元 ...

随机推荐

  1. 实现SSRS订阅

    以前曾经搞过SSRS的订阅,使用的是公司的邮件服务器,最近QQ群中有妹子问到同样的问题,虽然没能帮人家搞定,下面写出自己参考的资料,以供各位参考: 一.订阅前准备工作(转载自http://blog.s ...

  2. canvas实现刮刮卡效果

    canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.tou ...

  3. JAVA实现两种方法反转单列表

    /** * @author luochengcheng * 定义一个单链表 */ class Node { //变量 private int record; //指向下一个对象 private Nod ...

  4. （转）硬盘结构，主引导记录MBR，硬盘分区表DPT，主分区、扩展分区和逻辑分区，电脑启动过程

    硬盘结构硬盘有很多盘片组成,每个盘片的每个面都有一个读写磁头.如果有N个盘片.就有2N个面,对应2N个磁头(Heads),从0.1.2开始编号.每个盘片的半径均为固定值R的同心圆再逻辑上形成了一个以电 ...

  5. 解决 Windows XP 下 IIS 最大连接数为 10 的问题

    为了方便调试网站程序,就在 Windows XP 系统下安装了 IIS,但是出现了一个问题:“403.9 误-禁止访问:连接的用户过多”,会有这样的问题出现,一般有两种可能:一.IIS 本身的最大连接 ...

  6. CentOS 6.5下部署日志服务器 Rsyslog+LogAnalyzer+MySQL

    简介 LogAnalyzer 是一款syslog日志和其他网络事件数据的Web前端.它提供了对日志的简单浏览.搜索.基本分析和一些图表报告的功能.数据可以从数据库或一般的syslog文本文件中获取,所 ...

  7. Java学习进阶—高级编程

    当你已经熟练的掌握了面向对象中的各种概念后,是否会对这些知识是如何使用的产生浓厚的兴趣?本课程主要针对于已经掌握了JAVA核心开发技术的读者准备,讲解了JAVA多线程.常用类库.IO编程.网络编程.类 ...

  8. laydate日期范围控制

    1.html <input type="text" id="startTime" name="startTime" class=&qu ...

  9. 在使用easyui datagrid在tab中遇到的问题

    当切换tab时,数据加载了,但是table的宽和高不能不能够初始化. 郁闷了好久解决了这个问题: 在页面加载时和切换tab时,获取当前tab的名字,进行内容的初始化 $('a[name="m ...

  10. 百度图标echarts.js的使用

    echarts官网:http://echarts.baidu.com/api.html#echarts echarts是百度公司开的一种开源制作图片工具,是一个专门制作图表的开源工具,功能非常强大,地 ...