二级联动
JSP代码
1 <div class="form-group mon-group"> 2 <select id="countyName" name="countyName" class="form-control" style="width: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="width: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 }