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 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
随机推荐
- Java：将Excel数据导入到数据库(一眼就看会)
所用Jar包 1. sqljdbc4.jar 连接数据库的Jar包(根据数据库的不同进行选择,我用的SqlServer2008) 2.Jxl.jar 访问Excel的Jar包 注意:支持以.xls结尾 ...
- 将远程mysql服务器数据导出 csv 并发送到我的本机
1.在SQL上执行查询并导出操作 '; 2.发送到本机 SQL>system sz idIsNull2.csv;
- Cracking The Coding Interview 5.5
#include <iostream> #include <vector> using namespace std; int getNum1(int N) { int num= ...
- 4.8 C++ typeid操作符
参考:http://www.weixueyuan.net/view/6378.html 总结: typeid操作符用于判断表达式的类型,注意它和sizeof一样是一个操作符而不是函数. 如果需要使用t ...
- SQL-21 查找所有员工自入职以来的薪水涨幅情况，给出员工编号emp_no以及其对应的薪水涨幅growth，并按照growth进行升序
题目描述 查找所有员工自入职以来的薪水涨幅情况,给出员工编号emp_no以及其对应的薪水涨幅growth,并按照growth进行升序CREATE TABLE `employees` (`emp_no` ...
- easyui弹框后销毁当前tab弹框不显示的解决方式
var id=$("#pageId").val(); var message = "{\"id\":" + id+ ",\&quo ...
- 2019-04-08-day027-网络编程基础
网络编程 基于同一台机器上的多个程序之间通信 可以基于文件 基于多台机器之间的通信 可以基于网络 web程序两种架构完成的: C/S :client(客户端) server(服务端) B/S :bro ...
- 构造方法调用另一个构造方法，用this
using System; class Person { public int age; public string name; public Person(int age, string name) ...
- golang快速扫描
利用golang的并发优势快速扫描端口 Scanner startIp [endIp] port thread package main import ( "flag" " ...
- angular5 自定义指令 输入输出 @Input @Output(右键点击事件传递)
指令写法,angular5官网文档给的很详细. 首先要创建一个文件,需注意命名规范(后缀名为xxx.directive.ts): 今天要记录的是在多个li中,右键点击之后显示出对应的菜单,直接上图吧! ...