<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>m</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META NAME="Description" CONTENT="Power by 51windows.Net">
</HEAD>
<BODY>
<form method="post" name="myform">
<table border="1" width="400">
<tr>
<td><CENTER>
item left
</CENTER></td>
<td></td>
<td><CENTER>
item right
</CENTER></td>
</tr>
<tr>
<td width="40%"><select style="100%;" multiple name="left" size="8"
ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">
<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="20%" align="center"><input type="button" value=" >>>> " onClick="moveOption(document.getElementById('left'), document.getElementById('right'))">
<br>
<br>
<input type="button" value=" <<<< " onClick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</td>
<td width="40%"><select style="100%;" multiple name="right" size="8"
ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</select>
</td>
</tr>
<tr>
<td colspan="3"><CENTER>
<INPUT TYPE="button" value="up" onClick="changepos(right,-1)">
<INPUT TYPE="button" value="down" onClick="changepos(right,1)">
<INPUT TYPE="button" value="top" onClick="gototop(right)">
</CENTER></td>
</tr>
</table>
<input type="text" name="result" id="result" size="40" value="" />
</form>
<script language="JavaScript">
<!--
function moveOption(e1, e2){
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
i=i-1
}
}
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
function getvalue(geto){
//var allvalue = "";
//for(var i=0;i<geto.options.length;i++){
// allvalue +=geto.options[i].value + ",";
//}
var resultArray = new Array();
for(var i=0;i<geto.options.length;i++){
resultArray.push(geto.options[i].value);
}
return resultArray.join();
}
function changepos(obj,index){
if(index==-1){
if(obj.selectedIndex !=-1){
if (obj.selectedIndex>0){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1));
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
}else{
alert("please select a item");
}
}else if(index==1){
if(obj.selectedIndex !=-1){
if (obj.selectedIndex<obj.options.length-1) {
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1));
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
}else{
alert("please select a item");
}
}
}
function gototop(obj){
if(obj.multiple){
if(obj.selectedIndex !=-1){
for(var selIndex=0; selIndex<obj.options.length; selIndex++){
if(obj.options[selIndex].selected){
var transferIndex = selIndex;
while(transferIndex > 0 && !obj.options[transferIndex - 1].selected){
obj.options[transferIndex].swapNode(obj.options[transferIndex - 1]);
transferIndex --;
}
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
}
}else{
alert("please select a item");
}
}else{
if(obj.selectedIndex !=-1){
var selIndex = obj.selectedIndex;
while(selIndex > 0){
obj.options[selIndex].swapNode(obj.options[selIndex - 1]);
selIndex --;
}
document.getElementById('result').value=getvalue(document.getElementById('right'));
}else{
alert("please select a item");
}
}
}
//-->
</script>
</BODY>
</HTML>