<!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. tp配置

    <?php// +----------------------------------------------------------------------// | ThinkPHP [ WE ...

  2. Centos7安装配置iptable

    CentOS7默认的防火墙不是iptables,而是firewalle. 安装iptable iptable-service #先检查是否安装了iptables service iptables st ...

  3. redis_key键

    exists k1,判断k1是否存在,‘1’就是存在,‘0’ 就是不存在 move k3 2   --->这里就是说把k3移动到2号库. ‘1’为成功,‘0’为失败 ttl k2  --查看k2 ...

  4. 【python】pandas display选项

    import pandas as pd 1.pd.set_option('expand_frame_repr', False) True就是可以换行显示.设置成False的时候不允许换行 2.pd.s ...

  5. js 自执行匿名函数(转载)

    自执行匿名函数: 常见格式:(function() { /* code */ })(); 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命 ...

  6. audit:backlog limit exceeded

    今天发现存储服务器业务不可用,服务器能ping通,远程不了!  到机房管理员那里查看服务器状态后,发现显示如下: 显然系统已经崩溃,只能先重启服务器,先恢复业务,然后针对backlog limit e ...

  7. 5-log4j2.xml配置文件各个节点详解

    具体配置参考官网:http://logging.apache.org/log4j/2.x/manual/configuration.html 一.log.xml文件的大致结构 <?xml ver ...

  8. 2019-02-28-day001-python介绍

    今日内容大纲: 01 cpu 内存 硬盘 操作系统 CPU:中央处理器,相当于人大脑.---------飞机 内存:临时存储数据. 8g,16g,-----------高铁 1,成本高. 2,断电即消 ...

  9. <转载> VUE项目中CSS管理

    vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用sco ...

  10. 【转载】 详解BN（Batch Normalization）算法

    原文地址: http://blog.csdn.net/hjimce/article/details/50866313 作者:hjimce ------------------------------- ...