Insert two drop-down boxes for agents on the same page

html part

       <!--
        <tr>
          <th width="15%">Personnel List (Original)</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%">People list (new)</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 part

	//Seat group page return method
	function zrar_clearfun2(name) {
		if('rylistOld'==name){
			form.setValue("rylistOld", '');
			form.setValue("pbryidListOld", '');
		}else{
			form.setValue("rylistNew", "");
			form.setValue("pbryidListNew", "");
		}
	}
	//Seat group page return method
	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);			
		}
	}
	//Seat group page return method
	function zrar_clearfun(name) {
		if('rylistOld'==name){
			form.setValue("rylistOld", '');
			form.setValue("pbryidListOld", '');
		}else{
			form.setValue("rylistNew", "");
			form.setValue("pbryidListNew", "");
		}
	}

code behind

	/**
	 * Agent drop-down checkbox
	 * Author:Chen Yikang
	 * @param dao
	 * @param res
	 * @param req
	 * @throws Exception
	 * 2018-4-10 07:20:42 pm
	 */
	public void makeZxCheckbox(BaseZrarIDao dao,IResData res,IReqData req) throws Exception {
		IKhCommonBean khCommonBean = (IKhCommonBean) CoreFactory.getKhCommonBeanFactory();
		// get the dropdown box
		khCommonBean.getAllSelect(res, dao);
		// public class for agent grouping
		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);
	}

Pages section, there are two pages

One is the original agent grouping page, and the other requires you to modify many parameters yourself. The finished product is as follows:

<%@ 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);
}


//pop up the group seat frame
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'
	});
}

//select all groups
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;
	  	}
	}
}

//person select click checkbox
function zrar_recheckyhqx12(obj,id,mc){	
	//Currently clicked on the user's 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)
				//If one of the comparisons of all user checkboxes is false, it is false, so use or
				checkbz=checkbz&&str[i].checked;
	}
	var bzid = 'fz2' + obj.bzid;
	/ / Finally give the total whether to select
	$(bzid).checked=checkbz;
}

//Settings
function setSelectData12(){
	var value="";
	var cap="";
	var zxgh="";
	// get all parent nodes
	var str=document.getElementsByName('fz2');	
	for(var i=0;i<str.length;i++){
		//get group code
		var fzid = str [i] .value;
		// get each node
		var fzrystr = document.getElementsByName('yhid2'+fzid);	
		for(var j=0;j<fzrystr.length;j++){
			//select
			if(fzrystr[j].checked){
				//Agent grouping may be repeated
				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);
	
	//call the set content method
	if(checknum && checknum != "" ){
		eval('<c:out value="${returnfun2}"/>("'+value+'","'+cap+'","'+zxgh+'","'+checknum+'")');
	}else{
		eval('<c:out value="${returnfun2}"/>("'+value+'","'+cap+'","'+zxgh+'")');
	}
	 pclose32();
}

//clear method
function zrar_clear32(){

	// get all parent nodes
	var str=document.getElementsByName('fz2');	
	for(var i=0;i<str.length;i++){
		//get group code
		var fzid = str [i] .value;
		// group clear
		if($('fz2'+fzid).checked){
			$('fz2'+fzid).checked = false;
		}
		// get each node
		var fzrystr = document.getElementsByName('yhid2'+fzid);	
		for(var j=0;j<fzrystr.length;j++){
			//select
			if(fzrystr[j].checked){
				// Set to unchecked if empty
				fzrystr[j].checked = false;
			}
		}
	}

	//call the return method
	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>No people have been added to this group! </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>