jquery级联

html：

<div class="Teacher-bottom">
            <p>
                <span>您所在学校:
                    <select class="form-control" name="school_id" id="school_id">
						<option value="<%=myBrch.getBrchId()%>"><%=myBrch.getBrchName()%></option>
					</select>
                </span>
                &nbsp;
                 <span>请选择年级:
                     <select class="form-control" name="addressee_grade" id="addressee_grade" onchange="changeClass(this.value)">
						<option value="0">--请选择年级--</option>
						<%
							for (Object key : gradeMap.keySet()) {
								String str[] = key.toString().split("_");
								String phaseId = str[0];
								String gradeNumber = str[1];
								TeachPhaseEnum phase = TeachPhaseEnum.valueOf(TeachConstant.STUDY_TYPE_PREFIX + phaseId);
								Integer gradeNum = 0;
								if(Integer.parseInt(gradeNumber) <= 6){
									gradeNum = Integer.parseInt(gradeNumber);
								}else if(Integer.parseInt(gradeNumber) > 6 && Integer.parseInt(gradeNumber) < 10){
									gradeNum = Integer.parseInt(gradeNumber) - 6;
								}else if(Integer.parseInt(gradeNumber) > 9){
									gradeNum = Integer.parseInt(gradeNumber) - 9;
								}
								String gradeName = (String) phase.getGradeName().get(phaseId + "_" + gradeNum);
						%>
						<option value="<%=(phaseId + '_' + gradeNumber)%>"><%=gradeName%></option>
						<%
							}
						%>
					</select>
                </span>
                &nbsp;
                     <span>请选择班级:
                     <select class="form-control" name="addressee_class" id="addressee_class" onchange="changePerson(this.value)">
						<option value="0">--请选择班级--</option>
					 </select>
                </span>


            </p>
            <div>
             <p>请选择人员：</p>
                <ul>
                    <li>
                       
                    </li>
                    <li>
                        <div class="content">
						  <select multiple="multiple" id="select1">
						    
						  </select>
						  
						</div>
                    </li>
                    <li>
                    <div>
                    <span id="add" >选中右移>></span> <span id="remove" >选中左移>></span>
                    <span id="add_all" >全部右移>></span> <span id="remove_all" >全部左移>></span>
                    </div>
                    	
                    </li>
                    <li>
                        <div class="content">
						  <select multiple="multiple" name="addressee" id="addressee" >
						  </select>
						  
						</div>
                    </li>
                </ul>
            </div>
            <p class="radiO">
                <input type="checkbox" value="0" checked="checked" id="whether_send" name="whether_send" />&nbsp;是否发送短信 
					<input type="hidden" name="whetherSend" id="whetherSend" value="0">
					<span style="color: gray; width:330px;"> 提示：发送后APP会同时收到消息，勾选则同时给手机发短信</span> 
            </p>
        </div>

JS：

//根据年级联动出班级
function changeClass(v) {  
    jQuery('#addressee_grade').val(v); //让第一个下拉框保持显示选中的值  
    jQuery('#addressee_class').html(""); //把班级内容设为空  
    var ciValue = jQuery('#addressee_class');  
    ciValue.append('<option value="0">--选择班级--</option>');  
      
    //异步请求查询班级列表的方法并返回json数组  
    jQuery.ajax({  
        url : '/notice/schoolNotice/getClassName',  
        type : 'post',  
        data : { grade : v },  
        dataType : 'json',  
        success : function (opts) {  
            // 单选CI  
            if (opts && opts.length > 0) {  
                    var html = [];  
                    for (var i = 0; i < opts.length; i++) {  
                        html.push('<option value="'+opts[i].rowId+'">'+opts[i].className+'</option>');  
                    }  
                    ciValue.append(html.join(''));  
                }  
            }  
        });  
}

//根据班级联动出人员
function changePerson(v) {  
    jQuery('#addressee_class').val(v); //让第一个下拉框保持显示选中的值  
    jQuery('#select1').html(""); //把人员内容设为空  
    var ciValue = jQuery('#select1');  
      
    //异步请求查询班级列表的方法并返回json数组  
    jQuery.ajax({  
        url : '/notice/schoolNotice/getPerson',  
        type : 'post',  
        data : { classId : v },  
        dataType : 'json',  
        success : function (opts) {  
            // 单选CI  
            if (opts && opts.length > 0) {  
                    var html = [];  
                    for (var i = 0; i < opts.length; i++) {  
                        html.push('<option value="'+opts[i].userId+'">'+opts[i].userName+'</option>');  
                    }  
                    ciValue.append(html.join(''));  
                }  
            }  
        });  
}