ajax级联查询

业务需求:选择下拉列表中的地区值.获取该地区下的学校信息,提交form表单到后台获取学校下信息

jsp页面:

<form class="well form-inline" action="gra_graList.action"
    method="post" οnsubmit="return scarchGra();">   //提交验证  onsubmit  学校值为空,返回false,禁止提交
    <label>所属地区：</label> <select id="areaCode" name="areaCode">
     <option value="">--全部--</option>
     <c:forEach items="${areaList}" var="area">    //jstl  forEach 标签  迭代地区集合数据在下拉列表中显示
      <option value="${area.areaCode}"
       <c:if test="${areaNo==area.areaCode}">selected</c:if>>${area.areaName}</option>   //当提交返回后的地区code等于下拉列表

                                                                                                                                             //中的某一值时,该值选中
     </c:forEach>
    </select> <label>学校名称:</label> <select id="sclName" name="sclId">
     <option value="">--请选择--</option>
     <c:forEach items="${sclList}" var="list">
      <option value="${list.sclId}"
       <c:if test="${scl.sclId==list.sclId}">selected</c:if>>${list.sclName}</option>    //同上
     </c:forEach>
    </select>
    <button type="submit" class=" btn yellow">加载</button>
   </form>

------------------------

js代码:

var $areaCode = $("#areaCode");
 var $sclName = $("#sclName");
 $areaCode.on("change", function() {
  var areaCode = $areaCode.val();
  if (areaCode != "") {
   $.post("gra_getSchoolByArea.action", {       //js   $.post提交
    "areaCode" : areaCode
   }, function(json) {             
    $sclName.html("");
    for (var int = 0; int < json.length; int++) {
     $sclName.append("<option value="+json[int].sclId+">"
       + json[int].sclName + "</option>");
    }
   }, "json");
  } else {
   $sclName.html("");

  }
 });