JQuery左右切换实现
<!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">>></a></p>
<p><a style="padding-left:25px" href="#" id="selectAllRight">>>></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="#" ><<</a></p>
<p><a href="#"><<<</a></p>
</span>
</td> </tr>
</table>
</body>
</html>
JQuery左右切换实现的更多相关文章
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
- jquery 回车切换 tab功能
挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...
- 基于jQuery上下切换的焦点图—带缩略图悬浮
分享一款基于jQuery上下切换的焦点图,这款焦点图带有缩略图悬浮,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的.这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮 ...
- FlexSlider是一个非常出色的jQuery滑动切换插件
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看 ...
- jquery mobile切换页面的几种方法
jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- jQuery动画切换引擎插件Velocity.js
Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...
- jQuery箭头切换图片 - 学习笔记
jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z): x 代表横向坐标移向量的长度 y 代表纵向坐标移 ...
- 10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
随机推荐
- mysql数据库存储引擎及区别
MySQL有多种存储引擎,每种存储引擎有各自的优缺点,可以择优选择使用:MyISAM.InnoDB.MERGE.MEMORY(HEAP).BDB(BerkeleyDB).EXAMPLE.FEDERAT ...
- 将自己的域名解析跳转到博客主页（GitHub中的gitpage跳转）
最近突然迷上了博客,突然又突发奇想,将自己几个月前买的现在限制的域名拿来跳转到自己的csdn博客.经过一番研究,总结---- 把自己的购买的域名(比如我买的circleyuan.top)跳转到CSDN ...
- 十一. Python基础(11)—补充: 作用域 & 装饰器
十一. Python基础(11)-补充: 作用域 & 装饰器 1 ● Python的作用域补遗 在C/C++等语言中, if语句等控制结构(control structure)会产生新的作用域 ...
- Toy Factory
Factory is a design pattern in common usage. Please implement a ToyFactory which can generate proper ...
- 理解K系列与ultra-scale的区别
总结: K系列FPGA与KU系列FPGA的主要区别,体现在: (1)工艺制程不一样,K-28nm,KU-20nm: (2)Ultra-Scale采用SSI:大容量K系列也采用SSI,SSI为了 ...
- CentOS7安装配置Amanda
参考: https://wenku.baidu.com/view/881e0c998e9951e79a892759.html yum -y install amanda* http://blog ...
- DOS debug 命令的详细用法
DOS下的DEBUG命令的详细用法 2 推荐 名称 解释 格式 a (Assemble) 逐行汇编 a [address] c (Compare) 比较两内存块 c range addre ...
- idea打包 - 可执行jar包
需求:有一个基于SpringBoot的socket服务端程序,实现了对消息的接收.发送并行操作.此时想要将其构建成可执行的Jar包,执行 java -jar xx.jar后能够进行消息的收发. 分析: ...
- jetty安装、配置、优化
)Jetty: 作用:Jetty 是一个开源的servlet容器,它为基于Java的web内容,例如JSP和servlet提供运行环境. 特性:易用性,可扩展性,易嵌入性 2) Jetty安装: t ...
- 中文字符utf-8编码原则
UTF-8是一种变长字节编码方式.对于某一个字符的UTF-8编码,如果只有一个字节则其最高二进制位为0:如果是 多字节,其第一个字节从最高位开始,连续的二进制位值为1的个数决定了其编码的位数,其余各字 ...