<HTML>
<HEAD>
<title>CompnayList</title>
<script language="javascript">
function add()
{
rightlist=document.getElementById("lbCompanyList");
leftlist=document.getElementById("lbCompanySelected");
moveOption(rightlist,leftlist,false);
}
function remove()
{
rightlist=document.getElementById("lbCompanyList");
leftlist=document.getElementById("lbCompanySelected");
moveOption(leftlist,rightlist,false);
}
//move option form oFromList to oToList
function moveOption(oFromList,oToList,bAll)
{
var nFromLen = oFromList.options.length;
var nToLen = oToList.options.length;
var i = 0;
while(nFromLen > 0)
{
if(oFromList.options[i].selected || bAll)
{
oToList[nToLen++] = new Option(oFromList.options[i].text, oFromList.options[i].value);
oFromList.options[i] = null;
}
else
i++;
nFromLen--;
}
sortOption(oToList);
}
//compare two character's text value
function compare(a,b)
{
if(a.text < b.text)
return -1;
else if(a.text > b.text)
return 1;
return 0;
}
//sort options
function sortOption(oList)
{
if(oList.options.length > 1)
{
var optionList = new Array();
for(var i=0; i < oList.options.length; i++)
optionList.push(oList.options[i]);
optionList.sort(compare);
oList.length = 0;
for(var i=0; i < optionList.length; i++)
oList.options[i] = optionList[i];
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post">
<div>
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td>
<table cellSpacing="0" cellPadding="0" width="100%" align="center" bgColor="#f5f5f5" border="0">
<tr style="HEIGHT: 100px">
<td style="HEIGHT: 167px" width="15%"> </td>
<td style="HEIGHT: 167px" width="50%">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD style="HEIGHT: 20px" width="20%"><FONT face="宋体">Useable CompanyList</FONT></TD>
<TD style="HEIGHT: 20px" vAlign="bottom" width="10%"></TD>
<TD style="HEIGHT: 20px" width="20%"><FONT face="宋体"> Selected
CompanyList</FONT></TD>
<TD style="HEIGHT: 20px" width="50%"></TD>
</TR>
<tr>
<td width="40%" rowSpan="2">
<select id="lbCompanyList" name="lbCompanyList" multiple size="20" style="width:200px;height:250px">
<option value="Micro">MicroSoft</option>
<option value="IBM">IBM</option>
<option value="Google">Google</option>
<option value="Sun">Sun</option>
</select>
</p></td>
<td width="10%" height="157" vAlign="bottom" style="HEIGHT: 37px">
<br><br><br><br><br><br><br>
<input type="button" id="addCompany" value="Add" οnclick="add()">
<br>
</td>
<td width="40%" rowSpan="2">
<select id="lbCompanySelected" name="lbCompanySelected" multiple size="20" style="width:200px;height:250px">
</select>
</td>
<td width="50%" rowSpan="2"> </td>
</tr>
<tr>
<td vAlign="top" height="109">
<br><br><br><br>
<input type="button" id="delCompany" value="Remove" onClick="remove()"></td>
</tr>
</table>
</td>
<tr style="HEIGHT: 28px">
<td height="13" colSpan="2" bgColor="#ffffff">
<div><FONT face="宋体"></FONT> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</HTML>