ajax 三级联动

js：
            <tr>
                <td  style="text-align: right;"><label class="control-label" for="TITLE">标段:</label></td>    
                <td>
                        <select  name="SEGMENT_ID" id="bd" style="vertical-align:top;width: 215px;" οnchange="showBd(this.value)" >                                              
                         <c:forEach var="list" items="${segmentList}">
                         <option value="${list.SEGMENT_ID}" ${pd.SEGMENT_ID eq list.SEGMENT_ID?'selected':'' }>${list.TITLE}</option>
                         </c:forEach>                    
                          </select>
                </td>
            </tr>
            <tr>
                <td  style="text-align: right;"><label class="control-label" for="TITLE">隧道:</label></td>
                <%-- <td><input type="text" name="SD" id="SD" value="${pd.SD}" /></td> --%>
                <td>
                        <select name="SD" id="sd">
                        <c:forEach var="qhs" items="${listQhs}">
                         <option value="${qhs.QHS}" ${pd.QHS eq qhs.QHS?'selected':'' }>${qhs.QHS}</option>
                         </c:forEach>                
                        </select>
                </td>
            </tr>
            <tr>
                <td  style="text-align: right;"><label class="control-label" for="TITLE">期数:</label></td>
                <%-- <td><input type="text" name="QS" id="QS" value="${pd.QS}" /></td> --%>
                <td>
                        <select name="PERIOD_ID" id="period">
                        <c:forEach var="period" items="${periodList}">
                         <option value="${period.PERIOD_ID}" ${pd.QS eq period.PERIOD?'selected':'' }>${period.PERIOD}</option>
                         </c:forEach>                
                        </select>
                </td>
            </tr>

<script>

function showBd(obj){
            var SEGMENT_ID=obj;
            var html="<option value=\"0\" selected=\"selected\"> </option>";
            $("#sd").empty();//清楚内容
            //$("#sd").append(html);
            $.ajax({
                type:"POST",
                url: "<%=basePath%>/qhswh/ajaxGetQhs.do?SEGMENT_ID="+SEGMENT_ID,
                cache: false,
                async: false,
                dataType: "json",
                success: function (data){
                    if(data.length>0){
                        var html = "";
                        $.each(data,function(i){
                            html+="<option value="+data[i].QHS+"${pd.QHS =="+data[i].QHS+"?'selected':''}>"+data[i].QHS+"</option>"
                        });
                        $("#sd").append(html); 
                    }else{
                        $("#sd").append(html);
                    }
                }
            });
            
        };
         $("#bd").change(function(){
            var SEGMENT_ID=$(this).val();
            var html="<option value=\"0\" selected=\"selected\"> </option>";
            $("#period").empty();//清楚内容
            $.ajax({
                type: "post",
                url: "<%=basePath%>/segment/ajaxGetPeriod.do?SEGMENT_ID="+SEGMENT_ID,                    
                cache: false,
                async: false,
                dataType: "json",
            success:function(data){
            //追加本级option前，先清除city和county的option，以免重选时干扰
               // $("#bd option").remove(); 
                //$("#sd option").remove();
               // var option='<option>--请选择--</option>';
               if(data.length>0){
                   var html = "";
                   $.each(data,function(i){
                       html += '<option value="'+data[i].PERIOD_ID+'">'+data[i].PERIOD+'</option>';
                    });
                   $("#period").append(html);
               }else{
                   $("#period").append(html);
               }                       
            }
                      
            });
        });     

</script>

controller：

    @RequestMapping(value="/ajaxGetPeriod")
    public void ajaxGetPeriod(HttpServletResponse response) {
        logBefore(logger, " 123");
        PageData pd=new PageData();
        pd=this.getPageData();
        try {
            List<PageData> periodList = segmentService.getPeriod(pd);
            JSONArray arr = JSONArray.fromObject(periodList);
            String json = arr.toString();
            response.setCharacterEncoding("utf-8");
            response.setContentType("application/Json;charset=utf-8");
            PrintWriter out = response.getWriter();
            out.write(json);
            out.flush();
            out.close();
        } catch (Exception e) {
                        e.printStackTrace();
        }
    }