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 相关文章推荐
javascript 关闭IE6、IE7
Jun 01 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
$(&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
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
小程序登录态管理的方法示例
2018/11/13 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
python生成密码字典的方法
2018/07/06 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Python  Django 母版和继承解析
2019/08/09 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
法定代表人授权委托书范文
2014/09/22 职场文书
综治工作汇报材料
2014/10/27 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
学生会招新宣传语
2015/07/13 职场文书
写给同事的离职感言
2015/08/04 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python