Content interchange in two boxes in JSP can be added or removed _jsp programming

The following effect content needs to be implemented in the project. As shown in figure:

Specific implementation of the source code is as follows:

Two-box page Source:

Selected roles: <br/> <select multiple= "multiple" name= "Roleids" size= "ten" id= "Roleids" > <option value= "1" > Director </option> <option value= "2" > Physician </option><option value= "3" > Nurse </option><option VA Lue= "4" > Front </option><option value= "5" > Office </option> </select> <input type= "button" V Alue= "<<-Add" onclick= "Moveoptions (document.getElementById (' rolelist '), document.getElementById (' RoleIds ')) ; the "/> <input type=" button "value=" Removes->> "class=" btn1 "onclick=" moveoptions (' Roleids '), document.getElementById (' rolelist ');/> <br/> alternative roles: <br/> <select multiple= "multiple" Size= "Ten" id= "Rolelist" > <option value= "6" > Engineer 1 </option><option value= "7" > engineer 2 </option& Gt;<option value= "8" > Engineer 3 </option><option value= "9" > Engineer 4 </option><option value= "Ten" 
; Engineer 5 </option><option value= "11"> Engineer 6 </option> </select> 

Implementation of the JS code:

function Moveoptions (Osource, Otarget) {while 
(Osource.selectedindex >-1) { 
var opt = osource.options[ Osource.selectedindex]; 
Osource.removechild (opt); 
var mark = true; 
for (var i = 0; i < oTarget.options.length i++) { 
if (Opt.value = = otarget.options[i].value) { 
mark = false; 
} 
if (Mark) { 
var newopt = document.createelement ("option"); 
Otarget.appendchild (newopt); 
Newopt.value = Opt.value; 
Newopt.text = Opt.text; 
Newopt.selected = true; 
} 
}