jsp中两个框中内容互换可以添加也可以移除

这篇文章主要介绍了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. }