下拉列表select 由左邊框移動到右邊示例

更新時間：2013年12月04日 17:17:45 作者：

select由左邊框移動到右邊，下面有個不錯的示例，大家可以參考下

當頁面還沒有加載完的時候調(diào)用下面語句，會取不到“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> 