<!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. [Leetcode221]最大面积 Maximal Square

    [题目] Given a 2D binary matrix filled with 0's and 1's, find the largest square containing only 1's a ...

  2. 学习python二三事儿（二）

    多个变量赋值 Python允许你同时为多个变量赋值.例如: a = b = c = 1 以上实例,创建一个整型对象,值为1,三个变量被分配到相同的内存空间上. 您也可以为多个对象指定多个变量.例如: ...

  3. Java基础学习-Collection

    package Collection; import java.util.ArrayList; import java.util.Scanner; /*集合类的特点: * 大小可变 * * Array ...

  4. connection reset 分析解决(转载)

    文章转自:https://my.oschina.net/xionghui/blog/508758;记录下来以便以后复习查阅; 在使用HttpClient调用后台resetful服务时,“Connect ...

  5. MYSQL锁表问题解决

    本文实例讲述了MYSQL锁表问题的解决方法.分享给大家供大家参考,具体如下: 很多时候!一不小心就锁表!这里讲解决锁表终极方法! 案例一 ? 1 mysql>show processlist; ...

  6. ubantu 安装redis

    安装Redis服务器端 ~ sudo apt-get install redis-server 安装完成后,Redis服务器会自动启动,我们检查Redis服务器程序 检查Redis服务器系统进程 ~ ...

  7. python 爬虫第三方库

    这个列表包含与网页抓取和数据处理的Python库 网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络 ...

  8. wx 设置监测并自动更新

    checkUpdate(){ console.log('----->>checkVersionUpadte') const updateManager = wx.getUpdateMana ...

  9. BT原理分析

    BT全名為BitTorrent,是一個p2p軟件,你在下載download的同時,也在為其他用戶提供上傳upload,因為大家是「互相幫助」,所以不會隨著用戶數的增加而降低下載速度. 其實跟ED也十分 ...

  10. Linux串口设备树硬件、软件流控设置

    /********************************************************************** * Linux串口设备树硬件.软件流控设置 * 说明: ...