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. 利用keytool颁发https证书方法

    1.首先生成私有认证机构 命令:keytool -genkeypair -alias CAname   补充:keytool -list 命令增加 -v 可以查看CA详细信息 2.然后生成私有证书 命 ...

  2. 利用bat批处理——实现数据库的自动备份和删除

    之前见别人一直在玩批处理,最近公司也在用,就顺便学习下: 首先创建一个 txt文件 命名BackupDataBase  并修改后缀为.bat 编写两条命令: sqlcmd -S . -E -Q &qu ...

  3. DOM基础知识（Node对象、Element对象）

    5.Node对象 u  遍历节点 u 父节点 .parentNode - 获取父节点—> 元素节点或文档节点 .parentElement - 获取父元素节点—> 元素节点 u    子节 ...

  4. APUE学习笔记5——信号、信号集和进程信号屏蔽字

    1 信号传递过程 当引发信号的事件发生时(如软硬件异常.软件定时.终端产生信号或调用kill函数等等),会产生信号,内核会发送给目标进程. 在信号产生到信号传递给目标进程之间的时间间隔内,称该信号为未 ...

  5. nsrunloop与模式

    scrollview的模式切换:退出原来的模式使用新模式. 2018-04-18 18:16:41.208113+0800 CEMonitor[5014:410604] kCFRunLoopDefau ...

  6. iOS保持流畅有哪些秘诀? 除了黑科技GPU还有这些重要原因 期待安卓8.0流畅度逆袭

    经常有人提起iPhone使用起来要比Android手机流畅,现在谈谈为什么iOS使用中会让人觉得更加流畅一些.一方面iPhone的顶级硬件为iOS的流畅打好了基础,另一方面,专一定制的系统是保证体验的 ...

  7. ZBrush如何把不同材质赋予同一个模型上

    ZBrush 作为最专业的数字雕刻与绘画软件,能够制作出高质量的3D模型,包括模型的颜色贴图和材质属性.不同材质可以改变照明在表面上的反应,以便模型表现出光泽.凹凸.反射.金属性或透明效果.ZBrus ...

  8. 算法23-------岛屿的最大面积 LeetCode 695

    一.题目: 给定一个包含了一些 0 和 1的非空二维数组 grid , 一个 岛屿 是由四个方向 (水平或垂直) 的 1 (代表土地) 构成的组合.你可以假设二维矩阵的四个边缘都被水包围着. 找到给定 ...

  9. UVA1583-Digit Generator（紫书例题3.5）

    For a positive integer N , the digit-sum of N is defined as the sum of N itself and its digits. When ...

  10. Postgresql数据库的一些字符串操作函数

    今天做项目遇到客户反映了一个麻烦的事情,有一些数据存在,但就是在程序中搜索不出来,后来分析,发现问题为数据前面有几个空白字符,后来用SQL查询了一下,发现八九个数据表中,数千万条数据中有将近三百万条数 ...