[原]左右的移动<<>><>jQuery的实现
$(function () {
$('#toAllLeft').click(function () {
$('#se1 option').appendTo($('#se2'));
});
$('#toAllRight').click(function () {
$('#se2 option').appendTo($('#se1'));
});
$('#toRight').click(function () {
$('#se1 option:selected').appendTo($('#se2'));
});
$('#toLeft').click(function () {
$('#se2 option:selected').appendTo($('#se1'));
});
});
<div style=" margin-left:400px; margin-top:10px;">
<select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se1">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>查询</option>
<option>打印</option>
</select>
<div style="width: 50px; float: left; ">
<input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
<input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
<input type="button" name="name" value=">>" style="width: 50px;" id="toAllLeft" />
<input type="button" name="name" value="<<" style="width: 50px;" id="toAllRight" />
</div>
<select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se2">
</select>
</div>
[原]左右的移动<<>><>jQuery的实现的更多相关文章
- jQuery插件之ajaxFileUpload异步上传
介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- jquery中隐藏div的几种方法
//jQuery中的显示.隐藏方法 $("#id").show()://表示display:block, $("#id").hide()://表示disp ...
- ajax上传文件,并检查文件类型、检查文件大小
1.使用ajaxfileupload.js的插件,但是对插件做了一处修改,才能够正常使用 修改的部分如下: uploadHttpData: function (r, type) { var data ...
- 移动端轮播图插件(支持Zepto和jQuery)
一. 效果图 二. 功能介绍 1. 支持图片自动轮播和非自动轮播 2. 支持点击和滑动. 三. 简单介绍 代码都有注释,逻辑简单,不做更多赘述. 1. 在你的html中添加一行. <sectio ...
- 转载JQuery 获取设置值,添加元素详解
转载原地址 http://www.cnblogs.com/0201zcr/p/4782476.html jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操 ...
- jQuery each的实现与call方法的详细介绍
转载原出处: http://www.f2es.com/jquery-each-intro/ 先贴上jquery实现each功能的源代码(把常用的call部分提取出来,为了方便理解,就进行了一定的修改) ...
- JQ插件ajaxFileUpload、php实现图片,数据同时上传
代码结构如下: 1.HTML代码,没必要解释了. <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- jquery正则常用的
jQuery.validator.addMethod("mobilePhone",function(value,element){ return this.optional(ele ...
随机推荐
- java读写串口
http://blog.csdn.net/xxyy888/article/details/8946046
- MySQL binlog 查看信息
1)按时间筛选 mysqlbinlog --start-datetime="2009-09-14 0:20:00" --stop-datetim="2009-09-15 ...
- Linux系统安装建议
1.推荐使用CentOS-6.x 64位版本:2.分区,推荐分出/usr/local用来存放应用程序./data分区用来存放数据,具体分区建议如下:/boot 100Mswap 4096M (视内存大 ...
- B题 Before an Exam
Description Tomorrow Peter has a Biology exam. He does not like this subject much, but d days ago he ...
- 笔记一:OOAD与UML
一.面向对象的概念与方法 1. 面向对象 1.1. 面向对象是一种系统建模技术 1.2. 面向对象编程是按照OO的方法学来开发程序的过程 1.3. 通过分析系统内对象的交互来描述或建模一个系统 1. ...
- 转载-ACPI的知识
ACPI – the Advanced Configuration & Power Interface. ACPI是OS,BIOS和硬件之间的抽象层.它允许OS和平台独立的发展,比如新的OS可 ...
- MyBatis 多表联合查询,字段重复的解决方法
MyBatis 多表联合查询,两张表中字段重复时,在配置文件中,sql语句联合查询时使用字段别名,resultMap中对应的column属性使用相应的别名: <resultMap type=&q ...
- Openlayer 3 的画图测量面积
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CodeFroces--Good Bye 2016-A-New Year and Hurry(水题-模拟)
A. New Year and Hurry time limit per test 1 second memory limit per test 256 megabytes input standar ...
- Internet History, Technology and Security (Week1)
Week1. History: Dawn of Electronic Computing War Time Computing and Conmmunication Keywords: Electro ...