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 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
随机推荐
- JNA调用DLL（入门）：让你一眼就学会
DLL(Dynamic Link Library)文件,是基于C语言的动态链接库文件,就是一些封装好的方法,打成dll格式包,供别人调用 JNA是一种能够使Java语言使调用DLL的一种技术, 首先, ...
- 2.15 C++常量指针this
参考: http://www.weixueyuan.net/view/6346.html 总结: 在每一个成员函数中都包含一个常量指针,我们称其为this指针,该指针指向调用本函数的对象,其值为该对象 ...
- Python自动化必备发送邮件报告脚本详解
#!/usr/bin/python3# -*- coding:UTF-8 -*-import smtplib#smtplib库主要用来连接第三方smtp库,用来发邮件from email.mime.t ...
- NioEventLoop（netty 4.1）
里面有个excecutor属性, 在loopgroup实例化loop的时候, 如果execute一个runnable的task的时候,检测loop启动了没有,没启动的话,执行excecutor的exe ...
- vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换
elemen-ui官方网站:http://element.eleme.io/#/zh-CN/component/menu 新手小白利用vue+element-ui尝试搭建后台管理系统, 效果是这样的, ...
- day 29 socket 初级版
# 客户端介绍简单版# import socket# #1买手机# phone = socket.socket(socket.AF_INET,socket.SOCK_STREAM) #SOCK_STR ...
- MySQL Workbench将模型生成SQL文件出错
采用MySQL Workbench 设计好表和表关系后,从 File | Export 菜单中,选择 Forward Engineer SQL CREATE Script(正向引擎), 将我们的模型生 ...
- 'autocomplete="off"'在Chrome中不起作用解决方案
1.正确的姿势是: <input type="password" name="password" autocomplete="new-passw ...
- 4.App测试与Web测试的不同
注释:*蓝色为不同点,红色为测试类型* 测试工具不同 Web自动化用Selenium APP自动化用Appium 软件架构不同 App为C/S架构 Web为B/S架构 需要进行安装卸载更新测试 第一次 ...
- 中国网建提供的SMS短信发送
一个简单的发送短信的小demo 第一步: 兄弟们,首先你们去中国网建的官网去注册一个账户:网址http://sms.webchinese.cn/reg.shtml 第二步: 注册完成之后会有免费的测试 ...