javascript例子

 

<form action="" method="post">
	<table border="1">
		<tr>
			<td>
				<select name="first" size="10" multiple="multiple" 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 valign="middle">
			   <input name="left"  id="left" type="button"  value="左移一个" /><br/> 
			   <input name="left_all" id="left_all"  type="button"  value="全部左移" /><br/> 
			   <input name="right"  id="right" type="button" value="右移一个" /><br/>
			   <input name="right_all"  id="right_all" type="button"  value="全部右移" />
			</td>
			<td>
				 <select name="second" size="10" multiple="multiple"  id="second">
					 <option value="选项9">选项9</option>
				 </select>
			</td>
		</tr>
	</table>
</form>


<script type="text/javascript">
	/*********************** 单击向左移动一个或者多个 ****************************/
    document.getElementById("left").onclick = function(){
        var firstElement = document.getElementById("first");
        var secondElement = document.getElementById("second");
        var optionElements = firstElement.getElementsByTagName("option");
        for (var i = 0; i < optionElements.length; i++) {
            if (firstElement.selectedIndex != -1) {
                secondElement.appendChild(optionElements[firstElement.selectedIndex]);
            }
        }
    }
	/*********************** 单击向左移动全部 ****************************/
	document.getElementById("left_all").onclick = function(){
		 var firstElement=document.getElementById("first");	   
	     var secondElement=document.getElementById("second");
		 var optionElements=firstElement.getElementsByTagName("option");
		 var len=optionElements.length;
		 for(var i=0;i<len;i++){
			secondElement.appendChild(optionElements[0]);
		 }
	}
	
	/*********************** 双击向左移动一个或者多个 ****************************/
	 document.getElementById("first").ondblclick = function(){    
	   var secondElement=document.getElementById("second");
	   secondElement.appendChild(this[this.selectedIndex]);
    }
	
	//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	/*********************** 单击向右移动一个或者多个 ****************************/
    document.getElementById("right").onclick = function(){
        var firstElement = document.getElementById("first");
        var secondElement = document.getElementById("second");
        var optionElements = secondElement.getElementsByTagName("option");
        for (var i = 0; i < optionElements.length; i++) {
            if (secondElement.selectedIndex != -1) {
                firstElement.appendChild(optionElements[secondElement.selectedIndex]);
            }
        }
    }
	
	/*********************** 单击向右移动全部 ****************************/
	document.getElementById("right_all").onclick = function(){
		 var firstElement=document.getElementById("first");	   
	     var secondElement=document.getElementById("second");
		 var optionElements=secondElement.getElementsByTagName("option");
		 var len=optionElements.length;
		 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>