jsp中两个框中内容互换

在项目中需要实现如下的效果内容。如图：

具体实现的如下：

两个框的页面源码：

 

已选角色：
 
									主任
									医师
									护士
									前台
									内勤
						
					
					
						
						>
							class=btn1
							onclick=moveoptions(document.getelementbyid('roleids'),document.getelementbyid('rolelist')); />
				

						备选角色：
 
									工程师1
									工程师2
									工程师3
									工程师4
									工程师5
									工程师6
						
						

实现的js代码：

 

 

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