Example of a free add and subtract implementation of items in a list

<div align=center>
<form>
<table align=center bgcolor= "#e0e0e0" width=600 border=0 cellpadding=0 cellspacing=0>
<TR><TD height=4></td></tr>
<tr><td> List of departments to select:</td><td></td><td> selected Department list:</td></tr>

<tr><td>

<select name= "Cansel" size= "style=" Background-color: #ffffff; word-spacing:0;width:300 "Multiple ondblclick=" AddOne (); >

<option value= "' N900 '" > Safety and Environmental Protection Department </option>

<option value= "' 1600 '" > Safety and Environmental Protection Office </option>

<option value= "' 9400 '" > Newspaper </option>

<option value= "' C300 '" > Purchasing Department </option>

<option value= "' N000 '" > director's Office </option>

<option value= "' 3220 '" > Stamping Factory Technical Section </option>

<option value= "" "> Party Office </option>

<option value= "' D200 '" > Party committee Propaganda Department </option>

<option value= "' D100 '" > Party Organization Department </option>

<option value= "' 2400 '" > Party school </option>

<option value= "' 3500 '" > Second body Factory </option>

<option value= "' 4300 '" > Second assembly Plant </option>

<option value= "' 3a00 '" > Third assembly Plant </option>

<option value= "' 3400 '" > First bodywork factory </option>

<option value= "' 3600 '" > First assembly Plant </option>

<option value= "' 4200 '" > Electroplating workshop </option>

<option value= "' 9500 '" > TV station </option>

<option value= "' E800 '" > Power plant </option>

<option value= "' 4000 '" > Forging workshop </option>

<option value= "' D400 '" > Union </option>

<option value= "' B000 '" > Office </option>

<option value= "' B400 '" > Program Finance Department </option>

<option value= "' 0700 '" > Supervision and Audit Department </option>

<option value= "' 6300 '" > Import and Export Corporation </option>

<option value= "' 4100 '" > Precision Casting Workshop </option>

<option value= "' N700 '" > Retired Management Department </option>

<option value= "' E600 '" > Wood factory </option>

<option value= "' C500 '" > Quality Assurance Department </option>

<option value= "' B100 '" > Management Department </option>

<option value= "' B110 '" > Information Center </option>

<option value= "' B600 '" > Enterprise Culture Department </option>

<option value= "' B300 '" > HR Department </option>

<option value= "' N600 '" > Social Work Department </option>

<option value= "' C400 '" > Manufacturing Department </option>

<option value= "' C600 '" > Market two </option>

<option value= "' C200 '" > Market Department </option>

<option value= "' 2700 '" > Youth League Committee </option>

<option value= "' C100 '" > Research Center </option>

<option value= "' 0350 '" > Staff Training Center </option>

<option value= "' 1500 '" > Quality Assurance Department </option>

<option value= "' 3000 '" > Cast steel Factory </option>

<option value= "' 3300 '" > Bogie factory </option>

<option value= "' N300 '" > Asset Management Department </option>

<option value= "' B800 '" > Integrated Protection Department </option>

<option value= "' 2200 '" > Organization Department </option>

</select>
</td>

&LT;TD Align=center width=40>
<table width=100%>
&LT;TR&GT;&LT;TD align=center ><input Type=button name= "Addsel" value= ">" title= "Add selected department" ></td></ Tr>
&LT;TR&GT;&LT;TD align=center ><input Type=button name= "AddAll" value= "≥" title= "Add all Departments" ></td></ Tr>
&LT;TR&GT;&LT;TD align=center ><input Type=button name= "Delsel" "value=" the "title=" deleted the selected department "></td></ Tr>
&LT;TR&GT;&LT;TD align=center ><input Type=button name= "Delall" value= "≤" title= "Erase all Departments" ></td></ Tr>
</table>

</td>



&LT;TD align=right>
<select name= "Havesel" size= "style=" Background-color: #ffffff; word-spacing:0;width:300 "Multiple ondblclick=" DeLone (); >

</select>
</td></tr>
</table></form>
</div>


<script language=javascript>
var fldfrom=document.forms[0].    Cansel; List of units to select
var fldto=document.forms[0].     Havesel; List of units added

Determines whether the current selection has been added
function Isnotexist (Onestr,onesel)
{
for (Var i=0;i<onesel.length;i++)
{
if (ONESEL.OPTIONS[I].TEXT==ONESTR)
{
return false;
Break
}
}
return true;
}

Add a selected
function Addsele ()
{
for (Var i=0;i<fldfrom.length;i++)
{
if (fldfrom.options[i].selected)
{
if (Isnotexist (fldfrom.options[i].text,fldto))
{Fldto.options[fldto.length] = new Option (fldfrom.options[i].text,fldfrom.options[i].value);
}

}

Fldfrom.options[i].selected=false;

}
}


Deletes the selected
function Delsele ()
{
for (Var i=fldto.length-1;i>=0;i--)
{
if (fldto.options[i].selected)
{
Fldto.options[i] = null;
}
}
}

Add all
function Addalle ()
{
fldto.length=0;
for (Var i=0;i<fldfrom.length;i++)
{
Fldto.options[fldto.length] = new Option (fldfrom.options[i].text,fldfrom.options[i].value);
Fldfrom.options[i].selected=false;
}
}


Add one (double-click)
function AddOne ()
{

if (Isnotexist (fldfrom.options[fldfrom.selectedindex].text,fldto))
{Fldto.options[fldto.length] = new Option (fldfrom.options[fldfrom.selectedindex].text,fldfrom.options[ Fldfrom.selectedindex].value);
Fldfrom.options[fldfrom.selectedindex].selected=false;
}
}


Delete all
function Delalle ()
{
fldto.length=0;
}

Delete one (double-click)
function DeLone ()
{
Fldto.options[fldto.selectedindex]=null;
}

Before entering judgment
function Goenter ()
{
if (fldto.length==0)
{
Alert ("Please select at least one department!") ");
}
Else
{
for (Var i=0;i<fldto.length;i++)
{
Fldto.options[i].selected=true;
}


Document.forms[0].submit ();


for (Var i=0;i<fldto.length;i++)
{
Fldto.options[i].selected=false;
}
}
}

</script>

<div align=center><form> <table align=center bgcolor= "#e0e0e0" width=600 border=0 CELLSPACING=0&GT;&LT;TR&GT;&LT;TD height=4></td></tr><tr><td>  List of departments to select: &LT;/TD ><td></td><td>  List of selected departments: </td></tr><tr><td><select name= " Cansel "size=" "style=" Background-color: #ffffff; word-spacing:0;width:300 "Multiple ondblclick=" AddOne (); > <option value= "' N900 '" > Safety and Environmental Protection Department </option> <option value= "' 1600 '" > Safety and Technology Environmental Protection Department </option> <option value= "' 9400 '" > Newspaper </option> <option value= "' C300 '" > Purchasing Dept </option> <option value= "' N000 '" > Director Office </option> <option value= "' 3220 '" > Stamping Plant Technical Section </option&gt ; <option value= "" "> Party Office </option> <option value=" ' D200 ' "> Party Committee propaganda Department </option> &L T;option value= "' D100 '" > Party Organization Department </option> <oPtion value= "' 2400 '" > Party school </option> <option value= "' 3500 '" > Second bodywork factory </option> <option Value= "' 4300 '" > Second assembly Plant </option> <option value= "' 3a00 '" > Third assembly factory </option> <option V Alue= "' 3400 '" > First bodywork factory </option> <option value= "' 3600 '" > First assembly Plant </option> <option Val Ue= "' 4200 '" > electroplating workshop </option> <option value= "' 9500 '" > TV </option> <option value= "' E800 ' "> Power plant </option> <option value=" ' 4000 ' "> Forging workshop </option> <option value=" ' D400 ' " ; trade union </option> <option value= "' B000 '" > Office </option> <option value= "' B400 '" > Planning Finance </option> <option value= "' 0700 '" > Audit Department </option> <option value= "' 6300 '" , import and Export company </option> <option value= "' 4100 ' > Casting workshop </option> <option value=" ' N700 ' "&G T; retired Department of Management </option> <option value= "' E600 '" > Wood factory </option> <option value= "' C500 '" > Quality Assurance Department </opt ion> <option value= "' B100 '" > Management Department </option> <option value= "' B110 '" > Information Center </option > <option value= "' B600 '" > Corporate culture </option> <option value= "' B300 '" > Human Resources Department </opt ion> <option value= "' N600 '" > Social Work Department </option> <option value= "' C400 '" > Manufacturing Department &L t;/option> <option value= "' C600 '" > Market two </option> <option value= "' C200 '" > Marketing Department &L t;/option> <option value= "' 2700 '" > League Committee </option> <option value= "' C100 '" > Research and Development Center </option& Gt <option value= "' 0350 '" > Staff Training Center </option> <option value= "' 1500 '" > Quality Assurance Dept. </option> <o Ption value= "' 3000 '" > Cast steel factory </option> <option value= "' 3300 '" > Bogie factory </option> <option Val Ue= "' N300 '" &GT; Asset Management Department </option> <option value= "' B800 '" > Integrated Security Department </option> <option value= "' 2200 '" > Organization Organization </option> </select> </td> <td align=center width=40> <table width=100%> <tr><t D align=center ><input Type=button name= "Addsel" value= ">" title= "Add selected department" ></td></tr> <tr &GT;&LT;TD align=center ><input Type=button name= "AddAll" value= "≥" title= "Add all Departments" ></td></tr> &LT;TR&GT;&LT;TD align=center ><input Type=button name= "Delsel" "value=" the "title=" deleted the selected department "></td></ tr> <tr><td align=center ><input type=button name= "Delall" value= "≤" title= "Erase all Departments" ></td> </tr> </table> </td> <td align=right> <select name= "Havesel" size= "style=" Background-co Lor: #ffffff; word-spacing:0;width:300 "Multiple ondblclick=" DeLone (); ></select> </td></tr> </table></form> </div> &Lt;script language=javascript> var fldfrom=document.forms[0]. Cansel; List of units to select Var fldto=document.forms[0]. Havesel; List of units added//Determines whether the currently selected function Isnotexist (Onestr,onesel) {for (Var i=0;i<onesel.length;i++) {if (Onesel) has been added. OPTIONS[I].TEXT==ONESTR) {return false; Break } return true; ///Add selected function Addsele () {for (Var i=0;i<fldfrom.length;i++) {if (fldfrom.options[i].selected) { if (Isnotexist (fldfrom.options[i].text,fldto)) {Fldto.options[fldto.length] = new Option (Fldfrom.options[i].tex T,fldfrom.options[i].value); }} Fldfrom.options[i].selected=false; }///Delete selected function Delsele () {for (Var i=fldto.length-1;i>=0;i--) {if (fldto.options[i].selected) {Fldto.options[i] = null; }}//Add all function Addalle () {fldto.length=0; for (Var i=0;i<fldfrom.length;i++) {Fldto.options[fldto.length] = newOption (Fldfrom.options[i].text,fldfrom.options[i].value); Fldfrom.options[i].selected=false; }//Add one (double-click) function AddOne () {if (Isnotexist (fldfrom.options[fldfrom.selectedindex].text,fldto)) {Fldto.op Tions[fldto.length] = new Option (fldfrom.options[fldfrom.selectedindex].text,fldfrom.options[ Fldfrom.selectedindex].value); Fldfrom.options[fldfrom.selectedindex].selected=false; }///Remove all function Delalle () {fldto.length=0; //Delete one (double-click) function DeLone () {fldto.options[fldto.selectedindex]=null; //Before entering Judge function Goenter () {if (fldto.length==0) {alert ("Please select at least one department!") "); else {for (Var i=0;i<fldto.length;i++) {fldto.options[ I].selected=true; } document.forms[0].submit (); for (Var i=0;i<fldto.length;i++) {fldto.options[i].selected=false; }} </script>