<!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. 2.8 C++参数初始化表

    参考:http://www.weixueyuan.net/view/6340.html 总结: 参数初始化表可以为任何数据成员进行初始化. 初始化const成员变量的唯一方法只有利用参数初始化表. 通 ...

  2. MFC Release版本串口连不上的问题

    项目开发过程中发现Release版本存在连接串口时,第一次开机后,出现连接不上的问题,但在Debug版本下正常:而且只要连接上一次,Release版本就能正常连接: 解决方案: 在串口配置过程中更改为 ...

  3. IEDA中彻底删除项目

    删除项目一向比较奇葩,因为当你点击到 该项目名称-->右键 时,并没有 delete 选项,导致我们不知道怎么删除,查找多方文档,得到以下解决: (1)将鼠标移到要删除的 项目名称 上,单击并按 ...

  4. it网站

    1:http://www.importnew.com/    importnew  专注于java的论坛 2:Github是最活跃的开源代码库和版本控制平台,可以说是程序员当中知名度最高的技术社区.各 ...

  5. 使用Maven+ssm框架搭建一个web项目

    1,前期准备:Eclipse(Mars.2 Release (4.5.2)).jdk1.7.tomcat7.maven3.2.1 2.使用eclipse中的maven新建一个web项目 点击next: ...

  6. 爬虫框架存储pymysql方式

    爬虫框架存储pymysql方式# -*- coding: utf-8 -*-import pymysql# Define your item pipelines here## Don't forget ...

  7. 2019-03-15-day011-递归生成器

    函数的进阶: 动态参数: 两种: 动态位置参数 > 动态默认参数 打散(聚合): 实参处打散 形参处聚合 不在函数中第一次使用*打散,第二次是聚合 在数据库中快速写入数据的时候,**dic 名称 ...

  8. java学习笔记27（File类）

    File类: 定义:文件和目录径的抽象表示形式, Java中将路径或者文件封装成File对象 1.File类的静态成员变量 package com.zs.Demo2; import java.io.F ...

  9. binarysearchtree

    public class binarytree<Value> { private Node root = null; private class Node{ private Value v ...

  10. xargs用法

    xargs是一个很有用的命令,它可以实现并行,同&有异曲同工之妙,在大批量管理服务器时非常有用 xargs命令是给其他命令传递参数的一个过滤器,也是组合多个命令的一个工具.它擅长将标准输入数据 ...