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

原创 2013年12月04日 16:21:49

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

相关文章推荐

JS左边select内容选择到右边select内容里面的js实现方法(可以多选和全选)

示例1: function $(e){return document.getElementById(e);} function PutRightOneClk(str) { if($(str+"...

左边添加项到右边的JS实现

jquery操作select option 的代码小结 1、获取选中select的value和text,html代码如下: one two three 则可通过以下script代码s来获...
  • cbjcry
  • cbjcry
  • 2017年04月13日 10:09
  • 512

左边列表移到到右边列表

center       {           font-size:12px;           color:red;           font-weight:bold;      ...

左右两个Select列表框交换数据的JS代码,上下左右都可以移动数据,还可以置顶、沉底,相信大家见到过,但觉得挺实用,与大家分享。

Select列表框交换数据 center { font-size:12px; color:red; font-weight:bold; } select { font-s...
  • netzmj
  • netzmj
  • 2013年09月25日 12:03
  • 3945

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

JavaScript解析Json实现动态修改多级下拉选择列表控件Select

最终效果: 根据上级菜单所选,决定下级菜单的列表项内容 数据源 首先读取数据库中的数据得到数据,由于数据库中的数据是分散的几个二维表格,查询出来的数据是Map键值对的List集合,不能直接拿来用...

javascript增删节点以及如何操作下拉列表select和option(源代码)

增加节点 如何创建一个新的节点? var divObj=document.createElement("div"); 如何把节点对象添加到文档中的某个位置? div.appendChild(divOb...

Select下拉列表类(支持输入模糊查询)

可输入的下拉框 var j = 0; function SelectValue(obj) { var input = obj.parentNode...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【javascript】下拉列表select 由左边框移动到右边
举报原因:
原因补充:

(最多只允许输入30个字)