In jsp, you can add or remove content interchange in two boxes.
The specific implementation source code is as follows:
Page source code in two boxes:
Selected roles: <br/> <select multiple = "multiple" name = "roleIds" size = "10" id = "roleIds"> <option value = "1"> Director </option> <option value = "2"> physician </option> <option value = "3"> nurse </option> <option value = "4"> front-end </option> <option value = "5"> Internal Service </option> </select> <input type = "button" value = "<-Add" onclick = "moveOptions (document. getElementById ('rolelist'), document. getElementById ('rolekids'); "/> <input type =" button "value =" Remove-> "class =" btn1 "onclick =" moveOptions (document. getElementById ('roleids '), document. getElementById ('rolelist'); "/> <br/> alternative roles: <br/> <select multiple = "multiple" size = "10" id = "roleList"> <option value = "6"> Engineer 1 </option> <option value = "7"> engineer 2 </option> <option value = "8"> engineer 3 </option> <option value = "9"> Engineer 4 </option> <option value = "10"> engineer 5 </option> <option value = "11"> engineer 6 </option> </select>
Implemented 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; } } }