关闭

【javascript】下拉列表select 由左边框移动到右边

标签: javascriptselect
1038人阅读 评论(0) 收藏 举报
分类:

当页面还没有加载完的时候调用下面语句,会取不到“add” 这个对象,提示为空或不是对象

document.getElementById("add").onclick = function(){
 			alert("hello");
 		}
当使用便可取的对象

  	window.onload = function(){
 		document.getElementById("add").onclick = function(){
 			alert("hello");
 		}
 	}

<script type="text/javascript">
	//选中的从左边移到右边
 	 function toright() {
		 var firstElement = document.getElementById("first");
		 var secondElement = document.getElementById("second");
		 var firstoptionElement = firstElement.getElementsByTagName("option");
		 var len = firstoptionElement.length;
		 for(var i=0;i<len;i++){
			if(firstElement.selectedIndex != -1){ //selectedIndex 是select 的属性
			 secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
		 	}
		 }		
	}
 	//全部移动到右边
 	function allright(){
 		 var firstElement = document.getElementById("first");
		 var secondElement = document.getElementById("second");
		 var firstoptionElement = firstElement.getElementsByTagName("option");
		 var len = firstoptionElement.length;
		 for(var i=0;i<len;i++){
			 secondElement.appendChild(firstoptionElement[0]);//option选项选中时候索引为0 
		 }
 	}
 	//双击移动到右边
 	function db(){
	/*	 //方法一
		 var firstElement = document.getElementById("first");
		 var secondElement = document.getElementById("second");
		 var firstoptionElement = firstElement.getElementsByTagName("option");
		 var len = firstoptionElement.length;
		 for(var i=0;i<len;i++){
				if(firstElement.selectedIndex != -1){ //selectedIndex 是select 的属性
				 secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
			 	}
			 } */
		//方法二
		var firstElement = document.getElementById("first");
 		var secondElement = document.getElementById("second");
 		secondElement.appendChild(firstElement[firstElement.selectedIndex]);
 		}
 	
</script>

<style type="text/css"> 
	
</style>
</head>
<body>
   <table width="285" height="169" border="0" align="left">
    <tr>
    	<td width="126">
    		<select name="first" size="10" multiple="multiple" id="first" ondblclick="db()">
    			<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>
    		</select>
    	</td>
    	<td width="69" valign="middle">
    		<input id="add" name="add" type="button" value="---->" onclick="toright()"/>
    		<input id="add_all" name="add_all" type="button" value="==>" onclick="allright()"/>
    	</td>
    	<td width="127" align="left">
    		<select name="second" size="10" multiple="multiple" id="second">
    			<option value="选项8">选项8</option>
    		</select>
    	</td>
    </tr>
   </table>
</body>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    文章分类
    最新评论