代碼: 選擇全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Edit</title>
<script language="javascript" type="Text/javascript">
<!--
function swapNodes(item1,item2) {
var itemtmp = item1.cloneNode(1);
var parent = item1.parentNode;
item2 = parent.replaceChild(itemtmp,item2);
parent.replaceChild(item2,item1);
parent.replaceChild(item1,itemtmp);
itemtmp = null;
}
//-->
</script>
<SCRIPT language="javascript">
function moveUp(oSelect,isToTop)
{
if(isToTop == null)
var isToTop = false;
if(oSelect.multiple)
{
for(var selIndex=0; selIndex<oSelect.options.length; selIndex++)
{
if(isToTop)
{
if(oSelect.options[selIndex].selected)
{
var transferIndex = selIndex;
while(transferIndex > 0 && !oSelect.options[transferIndex-1].selected)
{
swapNodes(oSelect.options[transferIndex],oSelect.options[transferIndex - 1]);
transferIndex--;
}
}
}
else
{
if(oSelect.options[selIndex].selected)
{
if(selIndex > 0)
{
if(!oSelect.options[selIndex - 1].selected)
swapNodes(oSelect.options[selIndex],oSelect.options[selIndex - 1]);
}
}
}
}
}
else
{
var selIndex = oSelect.selectedIndex;
if(selIndex <= 0)
return;
if(isToTop)
{
while(selIndex > 0)
{
swapNodes(oSelect.options[selIndex],oSelect.options[selIndex - 1]);
selIndex --;
}
}
else
swapNodes(oSelect.options[selIndex],oSelect.options[selIndex - 1]);
}
}
function moveDown(oSelect,isToBottom)
{
if(isToBottom == null)
var isToBottom = false;
var selLength = oSelect.options.length - 1;
if(oSelect.multiple)
{
for(var selIndex=oSelect.options.length - 1; selIndex>= 0; selIndex--)
{
if(isToBottom)
{
if(oSelect.options[selIndex].selected)
{
var transferIndex = selIndex;
while(transferIndex < selLength && !oSelect.options[transferIndex + 1].selected)
{
swapNodes(oSelect.options[transferIndex],oSelect.options[transferIndex + 1]);
transferIndex ++;
}
}
}
else
{
if(oSelect.options[selIndex].selected)
{
if(selIndex < selLength)
{
if(!oSelect.options[selIndex + 1].selected)
swapNodes(oSelect.options[selIndex],oSelect.options[selIndex + 1]);
}
}
}
}
}
else
{
var selIndex = oSelect.selectedIndex;
if(selIndex >= selLength - 1)
return;
if(isToBottom)
{
while(selIndex < selLength - 1)
{
swapNodes(oSelect.options[selIndex],oSelect.options[selIndex + 1]);
selIndex ++;
}
}
else
swapNodes(oSelect.options[selIndex],oSelect.options[selIndex + 1]);
}
}
function moveSelected(oSourceSel,oTargetSel)
{
var arrSelvalue = new Array();
var arrSelText = new Array();
var arrvalueTextRelation = new Array();
var index = 0;
for(var i=0; i<oSourceSel.options.length; i++)
{
if(oSourceSel.options[i].selected)
{
arrSelvalue[index] = oSourceSel.options[i].value;
arrSelText[index] = oSourceSel.options[i].text;
arrvalueTextRelation[arrSelvalue[index]] = oSourceSel.options[i];
index ++;
}
}
for(var i=0; i<arrSelText.length; i++)
{
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelvalue[i];
oTargetSel.options.add(oOption);
oSourceSel.removeChild(arrvalueTextRelation[arrSelvalue[i]]);
}
}
function moveAll(oSourceSel,oTargetSel)
{
var arrSelvalue = new Array();
var arrSelText = new Array();
for(var i=0; i<oSourceSel.options.length; i++)
{
arrSelvalue[i] = oSourceSel.options[i].value;
arrSelText[i] = oSourceSel.options[i].text;
}
for(var i=0; i<arrSelText.length; i++)
{
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelvalue[i];
oTargetSel.options.add(oOption);
}
oSourceSel.innerHTML = "";
}
function deleteSelectItem(oSelect)
{
for(var i=0; i<oSelect.options.length; i++)
{
if(i>=0 && i<=oSelect.options.length-1 && oSelect.options[i].selected)
{
oSelect.options[i] = null;
i --;
}
}
}
function go()
{
for (var i=document.getElementById('right').options.length-1; i>=0; i--) document.getElementById('right').options[i].selected=true;
document.getElementById('form1').submit();
}
</SCRIPT>
</head>
<BODY style="font-size:12px">
<form id="form1" name="form1" method="post" action="">
<table><tr>
<td>
<font size="2"><b>LEFT</b></font>
<SELECT name="left" size="14" id="left" multiple style="width:200px; ">
<OPTION value="A1">A0001</OPTION>
<OPTION value="A2">A0002</OPTION>
<OPTION value="A3">A0003</OPTION>
</SELECT>
</td>
<td>
<INPUT style="border:1px solid black " type="button" value="上移一格" onClick="moveUp(document.getElementById('right'));">
<INPUT style="border:1px solid black " type="button" value="下移一格" onClick="moveDown(document.getElementById('right'));">
<INPUT style="border:1px solid black " type="button" value="上移到頂"
onClick="moveUp(document.getElementById('right'),true);">
<INPUT style="border:1px solid black " type="button" value="下移到底"
onClick="moveDown(document.getElementById('right'),true);">
<INPUT type="button" value="刪除選項" style="border:1px solid black "
onClick="deleteSelectItem(document.getElementById('left'));deleteSelectItem(document.getElementById('right'))">
<INPUT style="border:1px solid black " type="button" value="向右移動" onClick="moveSelected(document.getElementById('left'),document.getElementById('right'))">
<INPUT style="border:1px solid black " type="button" value="向左移動" onClick="moveSelected(document.getElementById('right'),document.getElementById('left'))">
<INPUT style="border:1px solid black " type="button" value="全部右移" onClick="moveAll(document.getElementById('left'),document.getElementById('right'))">
<INPUT style="border:1px solid black " type="button" value="全部左移" onClick="moveAll(document.getElementById('right'),document.getElementById('left'))">
<font size="2">( 支援多選移動 )</font>
</td>
<td>
<font size="2"><b>RIGHT</b></font>
<SELECT name="right" size="14" id="right" multiple style="width:200px; ">
<OPTION value="B1">B0001</OPTION>
<OPTION value="B2">B0002</OPTION>
<OPTION value="B3">B0003</OPTION>
<OPTION value="B4">B0004</OPTION>
<OPTION value="B5">B0005</OPTION>
<OPTION value="B6">B0006</OPTION>
</SELECT>
</td>
</tr></table>
</form>
</BODY>
</html>
以上代碼在IE6.0 & FireFox1.5.0.7調用成功~~