<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

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

<script>

$(function(){

//获得点击事件 单个

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

//2 得到被选中的元素 . 追加 id值为 right

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

});

// 获得多个 单击事件

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

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

});

});

</script>

</head>

<body>

<table>

<tr>

<td>分类</td>

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

</tr>

<tr>

<td>描述</td>

<td>

<textarea name="cdesc" rows="5" cols="15">

手机数码商品小米9

</textarea>

</td>

</tr>

<tr>

<td>

<span style="float: left;">

<font color="aqua">已经有的商品</font>

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

<option>iPhone!</option>

<option>小米9</option>

<option>华为10</option>

</select>

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

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

</span>

<span style="float: right;">

<font color="red">未有的商品</font>

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

<option>opp!</option>

<option>魅族</option>

<option>中兴</option>

</select>

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

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

</span>

</td>

</tr>

</table>

</body>

</html>

JQuery左右切换实现的更多相关文章

  1. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  2. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  3. jquery 回车切换 tab功能

    挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...

  4. 基于jQuery上下切换的焦点图—带缩略图悬浮

    分享一款基于jQuery上下切换的焦点图,这款焦点图带有缩略图悬浮,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的.这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮 ...

  5. FlexSlider是一个非常出色的jQuery滑动切换插件

    FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...

  6. jquery mobile切换页面的几种方法

    jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...

  7. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  8. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

  9. jQuery箭头切换图片 - 学习笔记

    jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z):        x 代表横向坐标移向量的长度       y 代表纵向坐标移 ...

  10. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

随机推荐

  1. Java Swing 简单介绍

    Swing 是一个为Java设计的GUI工具包. Swing是JAVA基础类的一部分. Swing包括了图形用户界面(GUI)器件如:文本框,按钮,分隔窗格和表. Swing提供许多比AWT更好的屏幕 ...

  2. 十五. Python基础(15)--内置函数-1

    十五. Python基础(15)--内置函数-1 1 ● eval(), exec(), compile() 执行字符串数据类型的python代码 检测#import os 'import' in c ...

  3. html、xhtml、html5的区别

    1.HTML:HyperText Mark-up Language(超文本标记语言)构成网页的主要语言  常指:HTML 4.012.XHTLM:EXtensible HyperText Mark-u ...

  4. 3.5 C++间接继承

    参考:http://www.weixueyuan.net/view/6362.html 总结: 假设类C继承自类B,类B继承自类A.那么类C中的除了能够继承B类的成员函数和成员变量外,同样也能继承B类 ...

  5. PE文件 01 导入表

    0x01  导入表结构  数据目录表中的第二个成员标记了导入表的RVA和Size大小,由此可以定位到导入表: typedef struct _IMAGE_DATA_DIRECTORY { DWORD ...

  6. CSS学习笔记-04 a标签-导航练习

    个人练习,各位大神勿笑  .. <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. suse_linux 11 sp3 安装 was7

    1.安装操作系统 suse linux 11 1.创建虚拟机 2.下一步 3.稍后安装操作系统,下一步 4.选择操作系统 5.选择存储目录 6.下一步 7.完成 8.编辑虚拟机 9.内存1G,CD/D ...

  8. getHibernateTemplate().save(t)执行不成功，数据不能插入到数据库

    BaseDaoImpl类中的代码如下 public void save(T t) {System.out.println(666);getHibernateTemplate().save(t);    ...

  9. 【Python】etree方法生成，解析xml

    #练习:另一种遍历xml文件的方式etree,xpathimport systry: import xml.etree.cElementTree as ET #前面带c的都是比较快的,效率高且不占内存 ...

  10. 常见Web应用程序漏洞

    不完善的身份验证措施 .这类漏洞包括应用程序登录机制中的各种缺陷,可能会使攻击者破解保密性不强的密码.发动蛮力攻击或完全避开登录. 不完善的访问控制措施.这一问题涉及的情况包括:应用程序无法为数据和功 ...