<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<style type="text/css">
<!--
* {
font: 9pt/150% "宋體";
}
-->
</style></head>
<body>
<table width="653" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td width="201" height="108">
<select id="s1" size="10" multiple style="width:150" ondblclick="moveSelect('s1','s2')">
<option value="1">11111</option>
<option value="2">22222</option>
<option value="3">33333</option>
<option value="4">44444</option>
<option value="5">55555</option>
<option value="6">66666</option>
<option value="7">77777</option>
<option value="8">88888</option>
</select></td>
<td width="83">
<input type="button" onclick="moveAll('s1','s2')" value=">>">
<br>
<input type="button" onclick="moveSelect('s1','s2')" value="->">
<br>
<input type="button" onclick="moveSelect('s2','s1')" value="<-">
<br>
<input type="button" onclick="moveAll('s2','s1')" value="<<"></td>
<td width="212">
<select id="s2" size="10" multiple style="width:150" ondblclick="moveSelect('s2','s1')">
<option value="A">AAAAA</option>
<option value="B">BBBBB</option>
<option value="C">CCCCC</option>
<option value="D">DDDDD</option>
<option value="E">EEEEE</option>
<option value="F">FFFFF</option>
</select></td>
<td width="157">
<input type="button" onclick="moveTop('s2')" value="Top">
<br>
<input type="button" onclick="moveUp('s2')" value="Up">
<br>
<input type="button" onclick="moveDown('s2')" value="Down">
<br>
<input type="button" onclick="moveBottom('s2')" value="Bottom"></td>
</tr>
</table>
<input type="button" onclick="t1.value=s1.outerHTML" value="察看S1">
<input type="button" onclick="t2.value=s2.outerHTML" value="察看S2">
<br>
<textarea name="t1" cols="50" rows="10"></textarea>
<textarea name="t2" cols="50" rows="10"></textarea>
</body>
<script language="javascript">
if(window.Node){// 修正Node的DOM
/*
IE5 MacIE5 Mozilla Konqueror2.2 Opera5
Node.removeNode yes no no no no
Node.swapNode yes no no no no
*/
Node.prototype.removeNode=function(removeChildren){// 刪除指定節點
if(removeChildren)
return this.parentNode.removeChild(this);
else{
var range=document.createRange();
range.selectNodeContents(this);
return this.parentNode.replaceChild(range.extractContents(),this);
}
}
Node.prototype.swapNode=function(Node){// 交換節點
var nextSibling=this.nextSibling;
var parentNode=this.parentNode;
Node.parentNode.replaceChild(this,Node);
parentNode.insertBefore(Node,nextSibling);
}
}
/*oS(String)：源select的id
*oT(String)：目標select的id
*/
function moveSelect(oS,oT)
{oS=document.getElementById(oS);
oT=document.getElementById(oT);
var count=oS.length;
if(count==0)
{alert("已經沒有項目可以移動");
return false
}
if(oS.selectedIndex==-1)
{alert("必須選擇要移動的項目");
return false
}
var selected=new Array();
var j=0;
var o=null
for(var i=0;i<oS.length;i++)
if(oS[i].selected)
{o=oS[i].cloneNode(true);
oT.appendChild(o);
selected[j++]=oS[i];
}
for(var i=0;i<j;i++)
selected[i].removeNode(true);
//oS.remove(selected[i]);
}
function moveAll(oS,oT)
{oS=document.getElementById(oS);
oT=document.getElementById(oT);
var count=oS.length;
if(count==0)
{alert("已經沒有項目可以移動");
return false
}
var o=null
for(var i=0;i<count;i++)
{o=oS[i].cloneNode(true);
oT.appendChild(o);
}
while(oS.length!=0)
oS[oS.length-1].removeNode(true);
}
//o(String):要控制的select的id
function moveTop(o)
{o=document.getElementById(o);
if(o.selectedIndex==-1)
{alert("必須選擇要移動的項目");
return false
}
if(o.selectedIndex==0)
{alert("無法再向上移動！");
return false
}
for(var i=o.selectedIndex;i>0;i--)
o[i].swapNode(o[i-1]);
}
function moveUp(o)
{o=document.getElementById(o);
if(o.selectedIndex==-1)
{alert("必須選擇要移動的項目");
return false
}
if(o.selectedIndex==0)
{alert("無法再向上移動！");
return false
}
var i=o.selectedIndex;
o[i].swapNode(o[i-1]);
}
function moveDown(o)
{o=document.getElementById(o);
if(o.selectedIndex==-1)
{alert("必須選擇要移動的項目");
return false
}
if(o.selectedIndex==o.length-1)
{alert("無法再向下移動！");
return false
}
var i=o.selectedIndex;
o[i].swapNode(o[i+1]);
}
function moveBottom(o)
{o=document.getElementById(o);
if(o.selectedIndex==-1)
{alert("必須選擇要移動的項目");
return false
}
var l=o.length-1
if(o.selectedIndex==l)
{alert("無法再向下移動！");
return false
}
for(var i=o.selectedIndex;i<l;i++)
o[i].swapNode(o[i+1]);
}
</script>
</html>
更多文章請訪問：http://blog.csdn.net/ITshu/
posted on 2007-10-02 08:41
小數 閱讀(166)
評論(0) 編輯 收藏 所屬分類:
ajax