ajax 二级联动

js： 

<input type="hidden" name="PERIOD_ID" id="PERIOD_ID" value="${pd.PERIOD_ID}"/>

 

td>
                        <select  name="SEGMENT_ID" id="bd" style="vertical-align:top;width: 215px;" οnclick="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>

<td>
                        <select name="PERIOD_ID" id="period" style="vertical-align:top;width: 215px;">
                                
                        </select>
 </td>

 

<script>

var PERIOD_ID = $("#PERIOD_ID").val();

 

 function showBd(obj){
            var SEGMENT_ID=obj;
            var html="<option  value=''></option>";
            $("#period").empty();//清楚内容
            //$("#sd").append(html);
            $.ajax({
                type:"post",
                url: "<%=basePath%>/segment/ajaxGetPeriod.do?SEGMENT_ID="+SEGMENT_ID,
                cache: false,
                async: false,
                dataType: "json",
                success: function (result){
                    if(result.length>0){
                        html="";
                        $.each(result,function(i){
                            if(PERIOD_ID == result[i].PERIOD_ID ){                                
                                html += "<option selected value="+result[i].PERIOD_ID+">"+result[i].PERIOD+"</option>";    
                            }else{
                                html += "<option  value="+result[i].PERIOD_ID+">"+result[i].PERIOD+"</option>";    
                            }
                            });                        
                    }
                }
            });
            $("#period").html(html); 
            
        } 

 

</script>