Html / JavaScript Code
<!DOCTYPE html>
<html>
<head>
<title> using list </title>
<script language="javascript">
function Move(s_from, s_to)
{
var a='';
var b='';
for(i=s_from.options.length - 1;i>=0;i--)
{
if(s_from.options[i].selected==true)
{
a=s_from.options[i].value;
b=s_from.options[i].text;
var nr=new Option(b,a);
s_to.options[s_to.length]=nr;
s_from.options[i]=null;
}
}
SelectSort(s_to);
}
function MoveAll(s_from,s_to)
{
var e_from = document.forms['test_form'].elements[s_from],
e_to = document.forms['test_form'].elements[s_to];
SelectSort(e_from);
//e_to.options.length = 0;
for (var i = 0; i < e_from.options.length; i++)
{
e_to.options[i] = new Option(e_from.options[i].text, e_from.options[i].value);
}
e_from.options.length = 0;
}
function SelectSort(SelList)
{
var ID='';
var Text='';
for (x=0; x < SelList.length - 1; x++)
{
for (y=x + 1; y < SelList.length; y++)
{
if (SelList[x].text > SelList[y].text)
{
// Swap rows
ID=SelList[x].value;
Text=SelList[x].text;
SelList[x].value=SelList[y].value;
SelList[x].text=SelList[y].text;
SelList[y].value=ID;
SelList[y].text=Text;
}
}
}
}
</script>
</head>
<body>
<div>
<form name="test_form">
<table style="border:solid;height:200px;width:300px">
<tr>
<td rowspan="4">
<select name="list1" size="9"style="height:144px;width:144px;" MULTIPLE>
<option value="1">asp</option>
<option value="2">boot</option>
<option value="3">javascript</option>
<option value="4">html</option>
<option value="5">css</option>
<option value="8">onclick</option>
<option value="9">dhtml</option>
<option value="9">table</option>
</select>
</td>
<td rowspan="4">
<input type="button" value=">" name="b1" onclick="Move(document.test_form.list1, document.test_form.list2)" /><br><br>
<input type="button" value="<" name="b2" onclick="Move(document.test_form.list2, document.test_form.list1)" /><br><br>
<input type="button" value=">>" name="b3" onclick="MoveAll('list1','list2')" /><br><br>
<input type="button" value="<<" name="b4" onclick="MoveAll('list2','list1')" />
</td>
<td rowspan="4">
<select name="list2" size="9" style="height:144px;width:144px;" MULTIPLE>
</select>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>