這篇文章主要介紹了jsp中兩個框中內容互換的具體實現，就是可以添加也可以移除，詳細代碼如下

在項目中需要實現如下的效果內容。如圖：

具體實現的源碼如下：

兩個框的頁面源碼：

1. 已選角色：<br /> <select multiple="multiple" name="roleIds" size="10" id="roleIds">  
2.  
3. <option value="1">  
4. 主任  
5. </option>  
6. <option value="2">  
7. 醫師  
8. </option><option value="3">  
9. 護士  
10. </option><option value="4">  
11. 前臺  
12. </option><option value="5">  
13. 內勤  
14. </option>  
15. </select>  
16.  
17. <input type="button" value="<<-添加" 
18.  
19. onclick="moveOptions(document.getElementById('roleList'),document.getElementById('roleIds'));" />  
20.  
21. <input type="button" value="移除->>"  
22. class="btn1"  
23. onclick="moveOptions(document.getElementById('roleIds'),document.getElementById('roleList'));" />  
24. <br/>  
25. 備選角色：<br /> <select multiple="multiple" size="10" 
26. id="roleList">  
27.  
28. <option value="6">  
29. 工程師1  
30. </option><option value="7">  
31. 工程師2  
32. </option><option value="8">  
33. 工程師3  
34. </option><option value="9">  
35. 工程師4  
36. </option><option value="10">  
37. 工程師5  
38. </option><option value="11">  
39. 工程師6  
40. </option>  
41.  
42. </select> 

實現的js代碼：

1. function moveOptions(oSource, oTarget) {  
2. while (oSource.selectedIndex > -1) {  
3. var opt = oSource.options[oSource.selectedIndex];  
4. oSource.removeChild(opt);  
5. var mark = true;  
6. for(var i = 0; i < oTarget.options.length; i++){  
7. if(opt.value == oTarget.options[i].value){  
8. mark = false;  
9. }  
10. }  
11. if(mark){  
12. var newOpt = document.createElement("OPTION");  
13. oTarget.appendChild(newOpt);  
14. newOpt.value = opt.value;  
15. newOpt.text = opt.text;  
16. newOpt.selected = true;  
17. }  
18. }  
19. }