Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var ToolArray=[];
function addTool(){
var frm=document.forms[0],s=frm['toolList'],b=frm['buyList'],i=s.selectedIndex,txt=s.options[i].text,v=s.options[i].value,z0=0,z1=0;
if (i>0){
for (;z0<ToolArray.length;z0++){
if (ToolArray[z0][0]==txt&&ToolArray[z0][1]==v){
return; // only allows one entry for each tool
}
}
ToolArray.push([txt,v]);
b.options.length=1;
for (;z1<ToolArray.length;z1++){
b.options[z1+1]=new Option(ToolArray[z1][0],ToolArray[z1][1]);
}
}
else {
alert('select a product');
}
}
function removeTool(){
var frm=document.forms[0],b=frm['buyList'],i,z0=0;
for (var z0=0;z0<ToolArray.length;z0++){
i=b.selectedIndex;
if (i>0&&ToolArray[z0][0]==b.options[i].text&&ToolArray[z0][1]==b.options[i].value){
b.removeChild(b.options[z0+1]);
ToolArray.splice(z0--,1);
}
}
}
/*]]>*/
</script></head>
<body>
<form>
<select name="toolList">
<option value="" style="display:none;"></option>
<option value="cDrill">Cordless Drill</option>
<option value="cScrew">Cordless Screwdriver</option>
<option value="circSaw">Circular Saw</option>
<option value="bandsaw">Bandsaw </option>
<option value="discsander">Disc Sander</option>
</select>
</p>
<p>
<input type = "button" value = "Add Tool" onclick = "addTool();" style = "width: 120px" />
<br />
<br />
<select name = "buyList" multiple = "multiple" size = "10" style = "width: 500px">
<option value = "none">Items to be purchased</option>
</select></p>
<input type = "button" value = "Remove Tool" onclick = "removeTool();" style = "width: 120px" />
<p>
</form>
</body>
</html>