二级联动

JSP代码

 1  <div class="form-group mon-group">                              
 2       <select id="countyName" name="countyName" class="form-control" style="170px;">                                             
 3            <option value="">请选择县区</option>
 4                  <c:forEach items="${dituOfficeList}" var="officeList">
 5                        <option data-id="${officeList.county_code}" value="${officeList.county_name}" <c:if test="${officeList.county_name eq dituJzwBuildInfo.countyName}">selected="selected"</c:if>>${officeList.county_name}</option>
 6                  </c:forEach>                                                                                
 7         </select>                             
 8  </div> 
 9                           
10   <div class="form-group mon-group">
11            <select id="yxzxName" name="yxzxName" class="form-control"  style="170px;">
12                   <option value="">请选择营服</option>                                                      
13             </select>                              
14   </div>

JS代码

 1 function yxzxinit(){
 2             var id=$('#countyName option:selected').attr("data-id");                 
 3                 $.ajax({
 4                 type: 'POST',
 5                 url: "${ctx}/ditu/dituDispatchDataQuery/findyxzxNameQueryList",
 6                 dataType: 'json',
 7                 data:{
 8                     id : id                    
 9                 },
10                 success: function(data) {
11                      $('#yxzxName').empty();
12                      var yxzx=data.yxzxNameQuery;
13                      if(null != yxzx && yxzx.length >0){
14                          $("#yxzxName").append("<option value=''>"+"请选择营服"+"</option>");
15                          for(var i = 0; i < yxzx.length; i++){
16                              if(yxzx[i].yxzx_name == '${dituJzwBuildInfo.yxzxName}'){
17                                  $("#yxzxName").append("<option value='"+yxzx[i].yxzx_name+"' selected="selected">"+yxzx[i].yxzx_name+"</option>");    
18                              }else{
19                                  $("#yxzxName").append("<option value='"+yxzx[i].yxzx_name+"'>"+yxzx[i].yxzx_name+"</option>");     
20                              }                         
21                          }                                                         
22                      }else{
23                          $("#yxzxName").append("<option value=''>"+"请选择营服"+"</option>");
24                      }
25                     }                             
26              });
27         }    
28             
29          $('#countyName').change(function(){                                           
30              yxzxinit();                                               
31          });
32          if($.trim('${dituJzwBuildInfo.countyName}')){
33              yxzxinit();
34          }