JS从左边移动到右边

来源：互联网发布：js获取this对象编辑：程序博客网时间：2024/04/30 01:42

效果图：

<%@ 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>

0 0