Take a look maybe this can help you.
<html>
<head>
<title>test</title>
<script language="Javascript">
/* Move values from the unselect box to the selected. */
function moveselectvalues()
{
var OutList = document.group.select_approver;
for (var i = 0; i < group.unselect_approver.options.length; i++)
{
if (group.unselect_approver.options.selected)
{
/* move values to the selected box and remove it
from the unselected box.
*/
iText = group.unselect_approver.options.text;
iValue = group.unselect_approver.options.value + '~~' + group.unselect_approver.options.text;
ReceiveOption(OutList,iText,iValue)
}
}
/* remove the values from the unselect box */
RemoveSelected(document.group.unselect_approver);
/* mark the last value selected in the select box */
SelectLastItem();
}
/* Move values from the select box to the unselect box */
function moveunselectvalues()
{
var OutList = document.group.unselect_approver;
for (var i = 0; i < group.select_approver.options.length; i++)
{
if (group.select_approver.options.selected)
{
/* Move the values to the unselect box and remove it
from the select box.
*/
iText = group.select_approver.options.text;
iValue = group.select_approver.options.value;
ReceiveOption(OutList,iText,iValue)
}
}
/* remove the value from the selected box */
RemoveSelected(document.group.select_approver);
}
/* clear any fields selected in the markets selected list box if
the user selects anything from the markets unselected list box
*/
function clearselected()
{
for (var i = 0; i < group.select_approver.options.length; i++)
{
if (group.select_approver.options.selected)
{
group.select_approver.options.selected = false;
}
}
}
/* clear any fields selected in the markets unselected list box
if the user selects anything from the markets selected list box
*/
function clearunselected()
{
for (var i = 0; i < group.unselect_approver.options.length; i++)
{
if (group.unselect_approver.options.selected)
{
group.unselect_approver.options.selected = false;
}
}
}
/* Add values to a combo box */
function ReceiveOption(OutList,iText,iValue)
{
newoption = new Option(iText,iValue,false,false);
OutList.options[OutList.length] = newoption;
}
/* Remove the values selected from the previous list
after they are moved to another list.
*/
function RemoveSelected(InList)
{
var deleteFlag = true;
while (deleteFlag == true)
{
deleteFlag = false;
for (var i=0; i < InList.length; i++)
{
if (InList.options.selected)
{
InList.options = null;
deleteFlag = true;
break;
}
}
}
group.btnremove.disabled=true;
}
/* select all items for the select list box */
function SelectAllListItems()
{
for (var i = 0; i < group.select_approver.options.length; i++)
{
group.select_approver.options.selected = true;
group.btnremove.disabled=false
group.btnadd.disabled=true
}
}
/* select last item for the select list box */
function SelectLastItem()
{
var i;
i = group.select_approver.options.length - 1
group.select_approver.options.selected = true;
group.btnremove.disabled=false;
group.btnadd.disabled=true
}
</script>
</HEAD>
<form ACTION="Chico21.asp" METHOD="POST" Name="group">
<TABLE align="center" width="800" cellspacing="0" cellpadding="2" border="1">
<tr>
<td>
<TABLE align="center" cellspacing="0" cellpadding="2" border="0">
<tr><th align="center">Unselected</th><th> </th><th align="center">Selected</th></tr>
<tr>
<td ALIGN="center">
<select name="unselect_approver" multiple size="5" onclick='{btnadd.disabled=false;btnremove.disabled=true;clearselected();}'>
<option value="1">Name one</option>
<option value="2">Name two</option>
<option value="3">Name three</option>
<option value="4">Name four</option>
<option value="5">Name five</option>
<option value="6">Name six</option>
<option value="7">Name seven</option>
</select>
</td>
<td VALIGN="CENTER" width="30">
<input disabled type="button" align="center" value=" Add " id="btnadd" NAME="selection" onClick="moveselectvalues();" TITLE="Add a approver.">
<input disabled type="button" value="Remove" id="btnremove" NAME="selection" onClick="moveunselectvalues();" TITLE="Remove an approver.">
</td>
<td ALIGN="CENTER">
<select name="select_approver" multiple size="10" onclick='{btnadd.disabled=true;btnremove.disabled=false;clearunselected();}'>
</select>
</td></tr>
<tr><td> </td></tr>
</table>
</td></tr>
</table>
</form>
</body>
</html>