jquery 实现两Select 标签项互调示例代码


Posted in Javascript onSeptember 25, 2014
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>


<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
$("#toRight").click(function(){
$("#selectLeft option:selected").each(function(){
$("#selectRight").append("<option value=" + $(this).val() + ">" + $(this).html() + "</option>");
$(this).remove();
});
});

$("#toLeft").click(function(){
$("#selectRight option:selected").each(function(){
$("#selectLeft").append("<option value=" + $(this).val() + ">" + $(this).html() + "</option>");//这个方法是默认在后面添加
//$("#selectLeft option:first").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此种方法是在select前面加内容
//$("#selectLeft option[value=3]").before("<option value=" + $(this).val() + ">" + $(this).html() + "</option>"); //此种方法是在selectt指定某一行加内容
$(this).remove();
});
});

});
//-->
</SCRIPT>


<BODY>
<table>
<tr>
<td>
<select size='10' multiple id="selectLeft" style="width:200px">
<option value="0">Jquery API</option>
<option value="1">JavaScript高级程序设计</option>
<option value="2">锋利的jQuery</option>
<option value="3">JavaScript 设计模式</option>
<option value="4">JavaScript+DOM高级程序设计</option>
<option value="5">PHP高级程序设计</option>
<option value="6">面向对象程序设计</option>
</select>
</td>
<td>
<input type="button" value=" >> " id="toRight" /><br /><br />
<input type="button" value=" << " id="toLeft" />
</td>
<td>
<select size='10' multiple id="selectRight" style="width:200px">
</select>
</td>
</tr>
</table>
</BODY>
</HTML>
Javascript 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 #Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 #Javascript
javascritp添加url参数将参数加入到url中
Sep 25 #Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 #Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 #Javascript
jquery动态分页效果堪比时光网
Sep 25 #Javascript
浅析js预加载/延迟加载
Sep 25 #Javascript
You might like
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
phpfpm的作用和用法
2019/10/10 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
Python如何进行时间处理
2020/08/06 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
教育专业个人求职信
2013/12/02 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
初二政治教学反思
2014/01/12 职场文书
小学教师师德反思
2014/02/03 职场文书
高中班级口号
2014/06/09 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
离婚起诉书范本
2015/05/18 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android
mysql序号rownum行号实现方式
2022/12/24 MySQL