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. c# TextBox

    1. text内容全选事件 textBox1.selectAll(); 2.失去与获取焦点事件 textox1.LostFocus += new EventHandler(txt_LostFocus) ...

  2. Centos7 minimal 系列之桥接模式联网（二）

    一.桥接模式联网 之前用NAT模式连接网络,Centos是可以上网,而且Centos可以ping通主机,但是主机ping不通虚拟机.后来发现Nat模式只能由内而外. 1.1设置虚拟机的网络适配器 1. ...

  3. 基于Doxygen的C/C++注释原则

    基于Doxygen的C/C++注释原则 标注总述 .文件头标注 . 命名空间标注 . 类.结构.枚举标注 . 函数注释原则 . 变量注释 . 模块标注 . 分组标注 总述 华丽的分隔线 //----- ...

  4. Tarjan 求图点强联通，桥的应用

    在图中求双联通和强联通分量是我们解决非树结构的图连通问题的利器 通过求求图的双联通和强联通分量能把图转化成DAG进行求解: 行走 Description 给出一个有向图,你可以选择从任意点出发走到任意 ...

  5. child和childNodes的区别

    child和childNodes区别: childNodes是标准属性, child是非标准属性 childNodes: 获取节点,不同浏览器表现不同 IE 只获取元素节点 非IE 获取元素节点和文本 ...

  6. 第三章 Python函数

    函数 如果在开发程序时,需要某块代码多次,但是为了提⾼编写的效率以及代码的重⽤,所以把具有独⽴功能的代码块组织为⼀个⼩模块,这就是函数 函数的定义 函数定义的三种方式:无参函数,有参函数,空函数 #无 ...

  7. 开源Android容器化框架Atlas开发者指南

    Atlas是古希腊神话中的天神,是波士顿动力公司的机器人,借助搜索引擎,得以发现这个名词背后许许多多的含义.在手机淘宝,Atlas是一个扎根于Android客户端的一个组件化容器框架,相比神话中用手和 ...

  8. wordpress 拾遗

    wordpress 拾遗 运行环境 php mySQL Apache 集成开发环境 Appserv xampp phpstudy 文章和页面的区别 文章是发布网站主要内容的地方,比如博客的文章,商城的 ...

  9. 鸟哥的linux私房菜

    http://vbird.dic.ksu.edu.tw/linux_basic/linux_basic.php

  10. 小记如何有顺序的搭建一个Spring的web项目

    如何有顺序的搭建一个Spring的web项目 一.新建一个简单的maven,war工程 eclipse下如有报错,右键 Deployment 单击 Generate 生成web.xml后可解决报错 二 ...