编程 Javascript

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>

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery 可排列的表实现代码

Nov 13 Javascript

js数值计算时使用parseInt进行数据类型转换(jquery)

Oct 07 Javascript

jQuery图片特效插件Revealing实现拉伸放大

Apr 22 Javascript

javascript日期操作详解(脚本之家整理)

Sep 05 Javascript

深入解析JavaScript的闭包机制

Oct 20 Javascript

JavaScript对HTML DOM使用EventListener进行操作

Oct 21 Javascript

理解javascript封装

Feb 23 Javascript

浅谈JS中的三种字符串连接方式及其性能比较

Sep 02 Javascript

JS实现搜索框文字可删除功能

Dec 28 Javascript

ES6学习教程之对象字面量详解

Oct 09 Javascript

Angular CLI在Angular项目中如何使用scss详解

Apr 10 Javascript

JS实现的JSON序列化操作简单示例

Jul 02 Javascript

$("").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