动态添加/删除值的listbox页面怎么写？

<html>
<head>
<script language="javascript">
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);
 }
 
 function compare(a,b)
 {
  if (a.text < b.text)
  return -1;
   else if (a.text > b.text)
    return 1;
return 0;
}

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 name="form1"><table align=center>
   <tr>
   
    <td width="77"> <div align="center">
        <select name="leftlist" multiple size="4">
          <option value="1">fason1</option>
          <option value="2">fason2</option>
          <option value="3">fason3</option>
          <option value="4">fason4</option>
        </select>
      </div></td>

    <td width="63"> <div align="center">
        <input type="button" value=" << " onclick="javascript:moveOption(rightlist, leftlist,true)">
        <br>
        <input type="button" value=" <  " onclick="javascript:moveOption(rightlist, leftlist,false)">
        <br>
        <input type="button" value=" >  " onclick="javascript:moveOption(leftlist, rightlist,false)">
        <br>
        <input type="button" value=" >> " onclick="javascript:moveOption(leftlist, rightlist,true)">
      </div></td>
 
    <td width="46"> <div align="center">
        <select name="rightlist" multiple  size="4">
        </select>
      </div></td>
 </tr></table>
 
<p align="right">
</body>
</html>