同一个页面插入两个坐席人员下拉框

html部分

       <!-- 
        <tr>
          <th width="15%">人员列表（原）</th>
          <td colspan="3">
            <div name="rylistOld" type="text" caption="人员列表（原）" css='width:591.38px' onClick="zrar_poppub();" readonly></div>
          </td>
          <td style="display: none" >
            <div name="pbryidListOld" type="text" caption="排班人员" css='width:600px'></div>
          </td>
        </tr>
        <tr>
          <th width="15%">人员列表（新）</th>
          <td colspan="3">
            <div name="rylistNew" type="text" caption="人员列表（新）" css='width:591.38px' onClick="zrar_poppub2();" readonly></div>
          </td>
          <td style="display: none" >
            <div name="pbryidListNew" type="text" caption="排班人员" css='width:600px'></div>
          </td>
        </tr>
         -->

js部分

	//座席分组页面回选方法
	function zrar_clearfun2(name) {
		if('rylistOld'==name){
			form.setValue("rylistOld", '');
			form.setValue("pbryidListOld", '');
		}else{
			form.setValue("rylistNew", "");
			form.setValue("pbryidListNew", "");
		}
	}
	//座席分组页面回选方法
	function zrar_returnfun(code, caption, zxgh, name) {
		if('rylistOld'==name){
			form.setValue("rylistOld", caption);
			form.setValue("pbryidListOld", code);
		}else{
			form.setValue("rylistNew", caption);
			form.setValue("pbryidListNew", code);			
		}
	}
	function zrar_returnfun2(code, caption, zxgh, name) {
		if('rylistOld'==name){
			form.setValue("rylistOld", caption);
			form.setValue("pbryidListOld", code);
		}else{
			form.setValue("rylistNew", caption);
			form.setValue("pbryidListNew", code);			
		}
	}
	//座席分组页面回选方法
	function zrar_clearfun(name) {
		if('rylistOld'==name){
			form.setValue("rylistOld", '');
			form.setValue("pbryidListOld", '');
		}else{
			form.setValue("rylistNew", "");
			form.setValue("pbryidListNew", "");
		}
	}

后台代码部分

	/**
	 * 坐席下拉复选框
	 * Author:陈宜康
	 * @param dao
	 * @param res
	 * @param req
	 * @throws Exception
	 * 2018-4-10 下午07:20:42
	 */
	public void makeZxCheckbox(BaseZrarIDao dao,IResData res,IReqData req) throws Exception {
		IKhCommonBean khCommonBean = (IKhCommonBean) CoreFactory.getKhCommonBeanFactory();
		// 获取下拉框
		khCommonBean.getAllSelect(res, dao);
		// 座席分组公用类
		IZxfzCommon zxfzcom = new ZxfzCommon();
		String unitdm = LoginSession.getUnitDM(req);
		zxfzcom.getZxFzStr(req, res, dao, "zrar_returnfun", "zrar_clearfun",
				"checkbox", "2", unitdm, "zxgh", "asc", true, "2", null);
		zxfzcom.getZxFzStr2(req, res, dao, "zrar_returnfun2", "zrar_clearfun2",
				"checkbox", "2", unitdm, "zxgh", "asc", true, "2", null);
	}

页面部分，有两个页面

一个是原版的坐席分组页面，另一个需要你自己修改很多参数，成品如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="/WEB-INF/c.tld"%>
<script language="javascript" type="text/javascript">
var checknum = "";
function zrar_poppub2(e){
	checknum = e.target.name;
	zrar_pop32(e);
}


//弹出分组座席框体
function zrar_pop32(e){
	$('popdiv22').setStyles({
		position: 'absolute',
		top: e.target._getPosition().y + e.target.getHeight(),
		left: e.target._getPosition().x,
		display: ''
	});
}

function pclose32(){
	$('popdiv22').setStyles({
		display: 'none'
	});
}

//组全选
function zrar_checkyh12(obj,id){
	var checkyh=obj.checked;
	var str=document.getElementsByName('yhid2'+id);
	if(checkyh){
		for(var i=0;i<str.length;i++){
			if(str[i].bzid==obj.value)
				str[i].checked=true;
	  	}
	}else{
		for(var i=0;i<str.length;i++){
			if(str[i].bzid==obj.value)
				str[i].checked=false;
	  	}
	}
}

//人员选择点击checkbox
function zrar_recheckyhqx12(obj,id,mc){	
	//当前点击用户的checkbox
	var checkbz=obj.checked;
	var str=document.getElementsByName('yhid2'+obj.bzid);
	for(var i=0;i<str.length;i++){
			if(str[i].bzid==obj.bzid)
				//所有用户checkbox的对比 若有一个为false则为false 故用或
				checkbz=checkbz&&str[i].checked;
	}
	var bzid='fz2'+obj.bzid;
	//最后赋予总的是否选中
	$(bzid).checked=checkbz;
}

//设置值
function setSelectData12(){
	var value="";
	var cap="";
	var zxgh="";
	//获取所有父节点
	var str=document.getElementsByName('fz2');	
	for(var i=0;i<str.length;i++){
		//获取组编码
		var fzid = str[i].value;
		//获取每个节点
		var fzrystr = document.getElementsByName('yhid2'+fzid);	
		for(var j=0;j<fzrystr.length;j++){
			//选中
			if(fzrystr[j].checked){
				//座席分组可能重复
				if( value.indexOf(fzrystr[j].value) < 0){
					value+=fzrystr[j].value+",";
					cap+=fzrystr[j].ryname+",";
					zxgh+=fzrystr[j].rygh+",";
				}
			}
		}
	}
	value=value.substring(0,value.length-1);
	cap=cap.substring(0,cap.length-1);
	zxgh=zxgh.substring(0,zxgh.length-1);
	
	//调用设置内容方法
	if(checknum && checknum != "" ){
		eval('<c:out value="${returnfun2}"/>("'+value+'","'+cap+'","'+zxgh+'","'+checknum+'")');
	}else{
		eval('<c:out value="${returnfun2}"/>("'+value+'","'+cap+'","'+zxgh+'")');
	}
	 pclose32();
}

//清空方法
function zrar_clear32(){

	//获取所有父节点
	var str=document.getElementsByName('fz2');	
	for(var i=0;i<str.length;i++){
		//获取组编码
		var fzid = str[i].value;
		//分组清空
		if($('fz2'+fzid).checked){
			$('fz2'+fzid).checked = false;
		}
		//获取每个节点
		var fzrystr = document.getElementsByName('yhid2'+fzid);	
		for(var j=0;j<fzrystr.length;j++){
			//选中
			if(fzrystr[j].checked){
				//清空则设置为不选中
				fzrystr[j].checked = false;
			}
		}
	}

	//调用返回清空方法
	if(checknum && checknum != "" ){
		eval('<c:out value="${clearfun2}"/>("'+checknum+'")');
	}else{
		 eval('<c:out value="${clearfun2}"/>()');
	}
	 pclose32();
}

</script>
<style type="text/css">
   
.userlist{ border:1px solid #A2C5DE; background:#FBFDFF;height:350px;overflow:auto;overflow-x: hidden; padding:5px 4px 5px 5px;}
.userlist ul{clear:both;}
.userlist li{ cursor:pointer; height:18px; line-height:23px;float:left; padding:5px 5px 4px 4px; width:110px;overflow:hidden; text-overflow:ellipsis\9;white-space:nowrap\9; }
.userlist .li_xz{ color:red;font-weight:bold;}
.userlist .li_yj{ font-weight:bold;  text-align:left; color:#06385B;border-bottom:1px dotted #A2C5DE; width:100%; }
.userlist p{ height:22px; margin:10px; text-align:right;}
.userlist p a{ display:inline-block; width:48px; height:22px; text-align:center; line-height:22px; color:#06385B;  text-decoration:none; margin-left:10px; background:url(../../zrarimages/main/checkbox_but.png) no-repeat;}
.userlist p a:hover{ background-position:right top; color:#000;}

</style>

<div class="userlist" style="width:500px;display:none" id="popdiv22" >	     	
	<ul>
		<c:forEach items="${zxfzlist2}" var='list' varStatus="it">
		<li id='yhcheckall' style='display:inline' class="li_yj" >
		    <input id='fz2<c:out value="${list.zxfzbh}"/>' name="fz2" type="checkbox" 
		    	value="<c:out value='${list.zxfzbh}'/>" onClick="zrar_checkyh12(this,'<c:out value="${list.zxfzbh}"/>')"/><span><c:out value='${list.zxfzmc}'/>：坐席名称(工号)</span>
	    </li>
	     <c:if test="${not empty list.zry}">
	    	<c:forEach items="${list.zry}" var='ry' varStatus="ryit">
			<li style="display:block" title='<c:out value="${ry.yhmc}"/>(<c:out value="${ry.zxgh}"></c:out>)'>
				<input id="ry<c:out value="${ry.yhid}"/>" name='yhid2<c:out value="${list.zxfzbh}"/>' type="checkbox" bzid='<c:out value="${list.zxfzbh}"/>'
				value='<c:out value="${ry.yhid}"/>' onclick="zrar_recheckyhqx12(this,'<c:out value="${ry.yhid}"/>',
				      '<c:out value='${ry.yhmc}'/>');" ryname='<c:out value="${ry.yhmc}"/>' rygh='<c:out value="${ry.zxgh}"/>'/> 
				<label for="<c:out value="${ry.yhid}"/>">
					<c:out value="${ry.yhmc}"/>(<c:out value="${ry.zxgh}"></c:out>)
				</label>
			</li>
			</c:forEach>
		</c:if>	
		 <c:if test="${empty list.zry}">
        				<li>该分组未添加人员！</li>
        			 </c:if>
		</c:forEach>	
	</ul>            
	<ul><p><a href="javascript:setSelectData12()" title="确定">确定</a><a href="javascript:zrar_clear32()" title="清空">清空</a><a href="javascript:pclose32()" title="关闭">关闭</a></p></ul>
</div>