In jsp, two boxes can be added or removed for content interchange, and jsp can be removed.

In jsp, two boxes can be added or removed for content interchange, and jsp can be removed.

The following effects must be implemented in the project.

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; } } }

Javascript: Two css styles Interchange

Use jquery
Download jquery. js from the Internet.
Jquery can be used after reference.
Css defines class styles using inline or external style sheets
Then, use jquery to add or remove the class element.
After adding a style, move the mouse to remove the style jquery code and change the image
$ ('Lil'). hover (function (){
$ (This). addClass ('add _ li ');
$ (This). children ('img '). attr ('src', 'img/symptom_li_img_red.gif ');

}, Function (){
$ (This). removeClass ('add _ li ');
$ (This). children ('img '). attr ('src', 'img/symptom_li_img.gif ');
});

Value interchange between two textarea In the JSP page

Using JS, you can make a function click () and get the first value to the second.