Dom操作小范例-非常实用，将数据在两个select之间转移 _Web前端

Dom操作小实例----非常实用，将数据在两个select之间转移
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
<!--
BODY
{
	font-family:"Courier";
	font-size: 12px;
	margin:0px 0px 0px 0px;
	overflow-x:no;
	overflow-y:no;
	background-color: #B8D3F4;
}
td
{
	font-size:12px;
}
.default_input
{
	border:1px solid #666666;
	height:18px;
	font-size:12px;
}
.default_input2
{
	border:1px solid #666666;
	height:18px;
	font-size:12px;
}
.nowrite_input
{
	border:1px solid #849EB5;
	height:18px;
	font-size:12px;
	background-color:#EBEAE7;
	color: #9E9A9E;
}
.default_list
{
	font-size:12px;
  border:1px solid #849EB5;
}
.default_textarea
{
	font-size:12px;
	border:1px solid #849EB5;
}

.nowrite_textarea
{
	border:1px solid #849EB5;
	font-size:12px;
	background-color:#EBEAE7;
	color: #9E9A9E;
}

.wordtd5 {
	font-size: 12px;
	text-align: center;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}

.wordtd {
	font-size: 12px;
	text-align: left;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}
.wordtd_1 {
	font-size: 12px;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #516CD6;
	color:#fff;
}
.wordtd_2{
	font-size: 12px;
	text-align: right;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #64BDF9;
}
.wordtd_3{
	font-size: 12px;
	text-align: right;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #F1DD34;
}
.inputtd
{
	font-size:12px;
	vertical-align:top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}
.inputtd2
{
	text-align: center;
	font-size:12px;
	vertical-align:top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}
.tablebg
{
	font-size:12px;
}

.tb{
	border-collapse: collapse;
	border: 1px outset #999999;
	background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
       border-right-width:0px;
	   border-left-width:0px;
	   border-top-width:0px;
	   border-bottom-width:1px;}

.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}




.noborder {
	border: none;
}

.button {
	border: 1px ridge #ffffff;
	line-height:18px;
	height: 20px;
	width: 45px;
	padding-top: 0px;
	background:#CBDAF7;
	color:#000000;
	font-size: 9pt;
    font-family:"Courier";
} 

.textarea {
	font-family: Arial, Helvetica, sans-serif, "??";
	font-size: 9pt;
	color: #000000;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #000000;
	background-color:transparent;
	text-align: left
}
-->
</style></head>

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
    	<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
		<select name="first" multiple="multiple" size=10 class="td3" id="s">
		  <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="left">
	  <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
	</td>
  </tr>
</table>
</div>
</body>
<script type="text/javascript">
 	window.onload=function(){
/*************************************************************************************************************/  	
	 //选中的从左端移到右端
	 //<input name="add"  id="add" type="button" class="button" value="-->" /> 
	 document.getElementById("add").onclick=function(){
	   	 //获取<select name="first" multiple="multiple" size=10 class="td3" id="first">
		 var firstElement=document.getElementById("first");
		
		 //获取option
		 var optionElements=firstElement.getElementsByTagName("option");
		 var len=optionElements.length;
		 //alert(len)
		
		//获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">
		 var secondElement=document.getElementById("second");
		
		//遍历option
		 for(var i=0;i<len;i++){
			var optionElement=optionElements[i];
			/*
			 * firstElement.selectedIndex:
			 *   * 表示当前选中的option的索引值,从0开始
			 *   * 如果没有被选中的，selectedIndex=-1
			 *   * 如果有多个被选中,selectedIndex的值永远是第一个被选中的值
			 *   * javaScript的数组是动态的数组,数组的长度是可变的,索引值也在变
			 */
			
			if (firstElement.selectedIndex != -1) {
			  // alert(firstElement.selectedIndex);
			   secondElement.appendChild(optionElements[firstElement.selectedIndex]);
			}		 	
		 }
	 }
	 //-------------------------------
	 //全部移动
	 document.getElementById("add_all").onclick=function()
	 {
	 	 var firstElement=document.getElementById("first");
		
		 //获取option
		 var optionElements=firstElement.getElementsByTagName("option");
		 var len=optionElements.length;
		 //alert(len)
		
		//获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">
		 var secondElement=document.getElementById("second");
		
		//遍历option
		 for(var i=0;i<len;i++){
			   secondElement.appendChild(optionElements[0]); 	
		 }
	 }
	 //全部移动简化的
	 /*
	 document.getElementById("add_all").onclick=function()
	 {
	 	 var firstElement=document.getElementById("first");
		 var secondElement=document.getElementById("second");
		 var optionElements=firstElement.getElementsByTagName("option");
		 var len=firstElement.length;
		//遍历option
		 for(var i=0;i<len;i++){
			   secondElement.appendChild(optionElements[0]); 	
		 }
		 
	 }
	 */
	 
	 //双击从左边移动到右边
	 /*
	 document.getElementById("first").ondblclick=function()
	 {
	 	var firstElement=document.getElementById("first");
	 	var optionElements=firstElement.getElementsByTagName("option");
	 	var secondElement=document.getElementById("second");
	 	for(var i=0;i<optionElements.length;i++)
	 	{
	 		secondElement.appendChild(optionElements[firstElement.selectedIndex]); 
	 	}
	 }
	 */
	 //双击右移简化
	 document.getElementById("first").ondblclick=function()
	 {
	 	var secondElement=document.getElementById("second");
	 	secondElement.appendChild(this[this.selectedIndex]);
	 }
	 //选中的从右到左
	 document.getElementById("remove").onclick=function()
	 {
	 	var secondElement=document.getElementById("second");
		
		 //获取option
		 var optionElements=secondElement.getElementsByTagName("option");
		 var len=optionElements.length;
		 //alert(len)
		
		//获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">
		 var firstElement=document.getElementById("first");
		
		//遍历option
		 for(var i=0;i<len;i++){
			 
			if (secondElement.selectedIndex != -1) {
			  firstElement.appendChild(optionElements[secondElement.selectedIndex]);
			}	
		 }
	 }	


	//全部的左移
	document.getElementById("remove_all").onclick=function()
	 {
	 	 var secondElement=document.getElementById("second");
		 var firstElement=document.getElementById("first");
		 var optionElements=secondElement.getElementsByTagName("option");
		 var len=secondElement.length;
		//遍历option
		 for(var i=0;i<len;i++){
			   firstElement.appendChild(optionElements[0]); 	
		 }
		 
	 }
	 
	 //双击左移
	 document.getElementById("second").ondblclick=function()
	 {
	 	var firstElement=document.getElementById("first");
	 	firstElement.appendChild(this[this.selectedIndex]);
	 }
	 
}
</script>
</html>