JQ写下拉列表项目移动(内附效果图和源代码)
效果图如下:
实现功能:点击第一个按钮,让选中的对象从左边移动到右边;
点击第二个按钮,让左边的所有对象移动到右边;
点击第三个按钮,让选中的对象从右边边移动到左边;
点击第四个按钮,让右边的所有对象移动到左边。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
select{width:130px; height:220px;}
</style>
<script>
//$(selector).append(content) :将content追加到selector选择器内部的最后面
// $(content).appendTo(selector):将content追加到selector选择器内部的最后面 $(function () { //当页面加载完成时;
$("option").dblclick(function() {
$(this).appendTo($(this).parent().siblings('select'));
}); $("input").eq(0).click( function () { //按下第一个按钮,触发函数
$("#hebei>option:selected").appendTo($("#henan")); //把选中的option移动到henan的下拉列表中
}); $("input").eq(1).click( function () { //按下第二个按钮,触发函数
$("#hebei>option").appendTo($("#henan")); //把hebei的option全部移动到henan的下拉列表中
}); $("input").eq(2).click( function () { //按下第三个按钮,触发函数
$("#henan>option:selected").appendTo($("#hebei")); //把选中的option移动到hebei的下拉列表中
}); $("input").eq(3).click( function () { //按下第四个按钮,触发函数
$("#henan>option").appendTo($("#hebei")); //把henan的option全部移动到hebei的下拉列表中
}); }); </script>
</head>
<body>
<select id="hebei" multiple="multiple">
<option>石家庄</option>
<option>保定</option>
<option>邯郸</option>
<option>邢台</option>
<option>衡水</option>
</select>
<select id="henan" multiple="multiple">
<option>郑州</option>
<option>开封</option>
<option>洛阳</option>
<option>周口</option>
<option>信阳</option>
</select><br /><br />
<input type="button" value="-->">
<input type="button" value="==>" >
<input type="button" value="<--" >
<input type="button" value="<==" > </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
select{width:130px; height:220px;}
</style>
<script>
//$(selector).append(content) :将content追加到selector选择器内部的最后面
// $(content).appendTo(selector):将content追加到selector选择器内部的最后面 $(function () { //当页面加载完成时; $("input").eq(0).click( function () { //按下第一个按钮,触发函数
var n = $("#hebei")[0].selectedIndex; //获取被选中的option的下标n
$("#hebei>option").eq(n).appendTo($("#henan")); //把下标为n的option移动到henan的下拉列表中 }); $("input").eq(1).click( function () { //按下第二个按钮,触发函数
$("#hebei>option").appendTo($("#henan")); //把hebei的option全部移动到henan的下拉列表中
}); $("input").eq(2).click( function () { //按下第三个按钮,触发函数
var n = $("#henan")[0].selectedIndex; //获取被选中的option的下标n
$("#henan>option").eq(n).appendTo($("#hebei")); //把下标为n的option移动到hebei的下拉列表中
}); $("input").eq(3).click( function () { //按下第四个按钮,触发函数
$("#henan>option").appendTo($("#hebei")); //把henan的option全部移动到hebei的下拉列表中
});
}); </script>
</head>
<body>
<select id="hebei" multiple="multiple">
<option>石家庄</option>
<option>保定</option>
<option>邯郸</option>
<option>邢台</option>
<option>衡水</option>
</select>
<select id="henan" multiple="multiple">
<option>郑州</option>
<option>开封</option>
<option>洛阳</option>
<option>周口</option>
<option>信阳</option>
</select><br /><br />
<input type="button" value="-->">
<input type="button" value="==>" >
<input type="button" value="<--" >
<input type="button" value="<==" > </body>
</html>
JQ写下拉列表项目移动(内附效果图和源代码)的更多相关文章
- JQ写简单的伸缩菜单(内附效果图和源代码)
效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- VC/Wince 实现仿Win8 Metro风格界面2——页面滑动切换(附效果图)
前几天开始写仿Win8 Metro界面文章,部分网友觉得不错,感谢各位的意见.本来今天一直在折腾Android VLC播放器,没时间写.不过明天休息,所以今天就抽时间先写一下. 言归正传,我们都知道W ...
- VC/Wince 实现仿Win8 Metro风格界面1——设计概述和自绘Button(附效果图)
去年用VC做了一个仿Win8 Metro风格的界面,感觉挺有意思,最近打算把实现过程和一些技术原理记录下来. 主要是风格上类似Win8,其实功能上很多借鉴了Android的操作方式.界面只支持两种大小 ...
- MIT挑战(如何在12个月内自学完成MIT计算机科学的33门课程|内附MIT公开课程资源和学习顺序
译者注:本文译自Scott H. Young的博客,Scott拥有超强的学习能力,曾在12个月内自学完成麻省理工学院计算机科学的33门课程.本文就是他个人对于这次MIT挑战的介绍和总结. 版权声明:本 ...
- 聊聊第一个开源项目(内网穿透) - CProxy
文章首发:聊聊第一个开源项目 - CProxy 作者:会玩code 初衷 最近在学C++,想写个项目练练手.对网络比较感兴趣,之前使用过ngrok(GO版本的内网穿透项目),看了部分源码,想把自己的一 ...
- 电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析)
电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析) 目录 电机噪声之谐波分析(内附simulink中FFT分析的相关参数配置与解析) 写在前面 正文 电机噪声 谐波的产生 什么 ...
- 从零开始学数据分析,什么程度可以找到工作?( 内附20G、5000分钟数据分析工具教程大合集 )
从零开始学数据分析,什么程度可以找到工作?( 内附20G.5000分钟数据分析工具教程大合集 ) 我现在在Coursera上面学data science 中的R programming,过去很少接 ...
- 最近在用placeholder ,是已有的,网上也有不少都是jq写的
其实除了支持placeholder 的浏览器,其他用js 或jq实现的都不叫placeholder 效果,只能算上是获取焦点,或失去焦点时的一个placeholder 没有出生时就已经存在效果 很多人 ...
- 第03篇. 标准Web项目Jetty9内嵌API简单启动
一直以来,想改变一些自己早已经习惯的事情. 到了一定年龄,便要学会寡言,每一句话都要有用,有重量. 喜怒不形于色,大事淡然,有自己的底线. --胖先生 昨天,简单的说了一下关于Jetty9的配置,大家 ...
随机推荐
- IOS第12天(3,UIViewController的生命周期)
#import "HMViewController.h" @interface HMViewController () @property(nonatomic,strong)NSA ...
- Windows内核 语言选择注意点
调用约定: 调用约定指的是函数被调用时,会按照不同规则,翻译成不同的汇编代码.当一个函数被调用时,首先会将返回地址压入堆栈,紧接着会将函数的参数依次压入堆栈.不同的调用约定,会指明不同的参数入栈顺序, ...
- Struts2基础学习总结
引用自:http://www.cnblogs.com/jbelial/archive/2012/05/10/2486886.html Struts 2是在WebWork2基础发展而来的. 注意:str ...
- 问题解决(一)在ipad上通过safari浏览文档
项目背景 针对用Sencha touch 1.1开发的一个用于通过ipad浏览的网站(其实是对PC端一个网站的映射)中的一个模块的开发,这个模块的主要功能就是用户浏览各种‘报告’,这些被阅览的‘报告’ ...
- 深入理解Spark RDD
RDD是什么? RDD,全称是Reslilient Distributed Datasets,是一个容错的,并行的数据结构,可以让用户显式地将数据存储到磁盘和内存中,并能控制数据的分区.同时,RDD还 ...
- wireless tool 移植
在linux上调试wifi, 需要移植wireless tool进行验证,本文记录移植方法. 参考链接 http://www.cnblogs.com/zengjfgit/p/5601473.html ...
- c#:浅克隆和深克隆,序列化和反序列化
一.浅克隆和深克隆(浅复制和深复制)浅克隆和深克隆最典型的应用是数据集对象DataSet的Clone和Copy方法.Clone()方法用来复制DataSet的结构,但是不复制DataSet的数据,实现 ...
- Jmeter进行数据库压测
一.配置并发用户 新建线程组,设置线程数,Ramp-up和循环次数 二.添加JDBC请求 先选中JDBC Users(线程组),右键选中ADD-Config Element--JDBC Connect ...
- WWDC 2013 Session笔记 - iOS7中的多任务
这是我的WWDC2013系列笔记中的一篇,完整的笔记列表请参看这篇总览.本文仅作为个人记录使用,也欢迎在许可协议范围内转载或使用,但是还烦请保留原文链接,谢谢您的理解合作.如果您觉得本站对您能有帮助, ...
- C#调用杀毒软件MSE扫描指定目录或文件
有这样的需求,对外网文件传到服务器上时,对文件扫描是否含有病毒.微软自己的杀毒软件MSE实现了提供了命令行调用,方便我们集成到C#开发的程序里面. 命令如下: -file "E:\t&quo ...