欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jsp中两个框中内容互换

程序员文章站 2022-08-09 09:31:02
在项目中需要实现如下的效果内容。如图: 具体实现的如下: 两个框的页面源码:   已选角色: 主任 医师 护士...

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

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