JS从左边移动到右边
2014-11-22 11:10
766 查看
效果图：
<%@ page language="java" iport="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>JS</title>
</head>
<body>
<table width="220px;" border="0" height="220px;" cellpadding="0" cellspacing="0" align="center" bgcolor="red;">
<tr>
<td width="126" align="center">
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1" >选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->"/>
<input name="add_all" id="add_all" type="button" class="button" value="==>"/>
<input name="remove" id="remove" type="button" class="button" value="<--"/>
<input name="remove_all" id="remove_all" type="button" class="button" value="<=="/>
</td>
<td width="127" align="center">
<select name="second" size="10" class="td3" id="second">
<option value="选项9">选秀9</option>
</select>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
/**********************第一个按钮***********************************************************/
//选中的从左边移动到右边
//<input name="add" id="add" type="button" class="button" value="-->"/>
document.getElementById("add").onclick=function(){
//<select name="first" size="10" multiple="multiple" class="td3" id="first">
var firstElement=document.getElementById("first");
//<select name="second" size="10" class="td3" id="second">
var secondElement=document.getElementById("second");
//获取所用option元素
var firstOptionElements=firstElement.getElementsByTagName("option");
var len=firstOptionElements.length;//定义固定长度
/**selectedIndex该下标返回下拉列表种选中的索引值
*selectedIndex是<select>的属性
**/
for(var i=0;i<len;i++){
// alert(firstElement.selectedIndex);
if(firstElement.selectedIndex!=-1){
secondElement.appendChild(firstOptionElements[firstElement.selectedIndex]);
}
}
}
/****************************第二个按钮*****************************************************/
//全部从左边移动到右边
//<input name="add_all" id="add_all" type="button" class="button" value="==>"/>
document.getElementById("add_all").onclick=function(){
//<select name="first" size="10" multiple="multiple" class="td3" id="first">
var firstElement=document.getElementById("first");
//<select name="second" size="10" class="td3" id="second">
var secondElement=document.getElementById("second");
//获取id=first所用option元素
var firstOptionElements=firstElement.getElementsByTagName("option");
//获取id=first下所有option元素的个数
var len=firstOptionElements.length;
for(var i=0;i<len;i++){
secondElement.appendChild(firstOptionElements[0]);
}
}
/*********************************************************************************/
//方法一 、双击从左移动到右
//document.getElementById("first").ondblclick=function(){
//<select name="first" size="10" multiple="multiple" class="td3" id="first">
//var firstElement=document.getElementById("first");
//<select name="second" size="10" class="td3" id="second">
//var secondElement=document.getElementById("second");
//获取id=first下所有option元素
// var firstOptionElements=firstElement.getElementsByTagName("option");
//获取id=first下所有option元素的个数
// var len=firstOptionElements.length;
// for(var i=0;i<len;i++){
// if(firstElement.selectedIndex!=-1){
// secondElement.appendChild(firstOptionElements[firstElement.selectedIndex]);
// }
// }
//}
/*********************************************************************************/
//方法二 、双击从左移动到右
document.getElementById("first").ondblclick=function(){
//<select name="second" size="10" class="td3" id="second">
var secondElement=document.getElementById("second");
/*
*this表示当前的select id=first的下拉选
*this.selectedIndex 双击事件选中的值
*this[this.selectedIndex]
*/
secondElement.appendChild(this[this.selectedIndex]);
}
/*********************************************************************************/
</script>
</html>
<%@ page language="java" iport="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>JS</title>
</head>
<body>
<table width="220px;" border="0" height="220px;" cellpadding="0" cellspacing="0" align="center" bgcolor="red;">
<tr>
<td width="126" align="center">
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1" >选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->"/>
<input name="add_all" id="add_all" type="button" class="button" value="==>"/>
<input name="remove" id="remove" type="button" class="button" value="<--"/>
<input name="remove_all" id="remove_all" type="button" class="button" value="<=="/>
</td>
<td width="127" align="center">
<select name="second" size="10" class="td3" id="second">
<option value="选项9">选秀9</option>
</select>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
/**********************第一个按钮***********************************************************/
//选中的从左边移动到右边
//<input name="add" id="add" type="button" class="button" value="-->"/>
document.getElementById("add").onclick=function(){
//<select name="first" size="10" multiple="multiple" class="td3" id="first">
var firstElement=document.getElementById("first");
//<select name="second" size="10" class="td3" id="second">
var secondElement=document.getElementById("second");
//获取所用option元素
var firstOptionElements=firstElement.getElementsByTagName("option");
var len=firstOptionElements.length;//定义固定长度
/**selectedIndex该下标返回下拉列表种选中的索引值
*selectedIndex是<select>的属性
**/
for(var i=0;i<len;i++){
// alert(firstElement.selectedIndex);
if(firstElement.selectedIndex!=-1){
secondElement.appendChild(firstOptionElements[firstElement.selectedIndex]);
}
}
}
/****************************第二个按钮*****************************************************/
//全部从左边移动到右边
//<input name="add_all" id="add_all" type="button" class="button" value="==>"/>
document.getElementById("add_all").onclick=function(){
//<select name="first" size="10" multiple="multiple" class="td3" id="first">
var firstElement=document.getElementById("first");
//<select name="second" size="10" class="td3" id="second">
var secondElement=document.getElementById("second");
//获取id=first所用option元素
var firstOptionElements=firstElement.getElementsByTagName("option");
//获取id=first下所有option元素的个数
var len=firstOptionElements.length;
for(var i=0;i<len;i++){
secondElement.appendChild(firstOptionElements[0]);
}
}
/*********************************************************************************/
//方法一 、双击从左移动到右
//document.getElementById("first").ondblclick=function(){
//<select name="first" size="10" multiple="multiple" class="td3" id="first">
//var firstElement=document.getElementById("first");
//<select name="second" size="10" class="td3" id="second">
//var secondElement=document.getElementById("second");
//获取id=first下所有option元素
// var firstOptionElements=firstElement.getElementsByTagName("option");
//获取id=first下所有option元素的个数
// var len=firstOptionElements.length;
// for(var i=0;i<len;i++){
// if(firstElement.selectedIndex!=-1){
// secondElement.appendChild(firstOptionElements[firstElement.selectedIndex]);
// }
// }
//}
/*********************************************************************************/
//方法二 、双击从左移动到右
document.getElementById("first").ondblclick=function(){
//<select name="second" size="10" class="td3" id="second">
var secondElement=document.getElementById("second");
/*
*this表示当前的select id=first的下拉选
*this.selectedIndex 双击事件选中的值
*this[this.selectedIndex]
*/
secondElement.appendChild(this[this.selectedIndex]);
}
/*********************************************************************************/
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS特效，将左边项移动到右边
- js动态的把左边列表添加到右边，可上下移动。
- JS动态的把左边列表添加到右边的实现代码(可上下移动)
- JS学习笔记只左边列表移动到右边
- JS动态的把左边列表添加到右边的实现代码(可上下移动)
- 左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）
- 选择左边多选框的值移动到右边多选框
- 对于一个字符串，设计一个算法，将包括i位置在内的左侧部分移动到右边，将右侧部分移动到左边。给定字符串A和它的长度n以及特点位置p，请返回旋转后的结果。
- 移动web——左边定宽右边自适应的布局（经典布局）写法
- [JS]链表划分给定中间值，小的在左边，大的在右边并保持原排序
- 左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）
- JS左边列表移到到右边列表
- 大家看看一道题：编号为123456789的火车经过如下轨道从左边入口处移动右边出口处（每车都必须且只能进临时轨道M一次，且不能再回左边入口处）
- JS左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）
- 直方图内最大矩形 DP 固定左边（遍历可固定），移动右边（便历移动），调整最大面积
- ubuntu 10.04将标题按钮从左边移动到右边
- 择左边多选框的值移动到右边多选框
- JS学习笔记之左边列表移到到右边列表
- 左边下拉框点击后选项移动到右边下拉框
- JS实现左边列表移到到右边列表功能