<!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. linux文件查看

    查看目录 #查看文件 使用  ls  命令,加上参数 -l 表示查看详细信息,-a 表示查看包含隐藏文件在内的文件.也可使用通配符,*代表任意个字符,? 表示单个字符. $ ls ch*.doc #表 ...

  2. ROS tab键补全操作出现错误

    ros tab键补全操作出现错误如下: $ roslaunch sp[rospack] Warning: error while crawling /home/hemudu: boost::files ...

  3. VCL界面控件DevExpress VCL Controls发布v18.2.3|附下载

    DevExpress VCL Controls是 Devexpress公司旗下最老牌的用户界面套包.所包含的控件有:数据录入,图表,数据分析,导航,布局,网格,日程管理,样式,打印和工作流等,让您快速 ...

  4. 百度地图API示例：鼠标绘制点线面 控件修改

    需求 :在使用地图API时,绘制工具栏控件想自己选择哪些要,哪些不要. 可以查看相应的类:官网地址: http://api.map.baidu.com/library/DrawingManager/1 ...

  5. <Parquet><Physical Properties><Best practice><With impala>

    Parquet Parquet is a columnar storage format for Hadoop. Parquet is designed to make the advantages ...

  6. L256 阅读理解

    1主旨题 2细节题 题干关键词 人名,地名,专有名词,时间,和主题相关的核心词汇,带特殊标点的词汇 干扰项 词意猜测

  7. Ubuntu配置静态IP

    1. 输入命令:sudo vi /etc/network/interfaces 编辑文件: auto lo iface lo inet loopback auto eth0 iface eth0 in ...

  8. MySQL：数据表基本操作

    数据表基本操作 注意点: 1.数据表中已经有数据时,轻易修改数据类型,有可能因为不同的数据类型的数据在机器 中存储的方式及长度并不相同,修改数据类型可能会影响到数据表中已有的数据类型. 2.  数据表 ...

  9. dos命令：批处理

    批处理 一.call命令 1.介绍 从批处理程序调用另一个批处理程序. 2.语法 CALL [drive:][path]filename [batch-parameters] batch-parame ...

  10. shell脚本实例-实现监控tcp的链接状态另一种方式批量创建用户

    Array实现TCP的链接状态 #!/usr/bin/bash declare -A status type=`ss -an | grep :80|awk '{print $2}'` for i in ...