【javascript】下拉列表select 由左边框移动到右边_select标签如何设置下拉标在最右边-优快云博客

本文探讨了在JavaScript中处理select下拉列表时遇到的问题，特别是在页面未完全加载时尝试操作select元素可能导致的错误。核心内容聚焦于如何在确保元素可用后再进行‘add’操作，以避免‘对象为空或不是对象’的错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当页面还没有加载完的时候调用下面语句，会取不到“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>