二级三级联动实现

最新推荐文章于 2021-11-19 15:55:06 发布

zhang.kaigang

最新推荐文章于 2021-11-19 15:55:06 发布

阅读量1.1k

点赞数

分类专栏： JS Java JSP

13 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

  参照网址： 
 http://www.helloweba.com/view-blog-188.html 

 
 test.jsp 

  <head> 

  <title>二级联动</title> 

  <script type="text/javascript" src="core/js/jquery.js"></script> 

  <script type="text/javascript" src="js/ 
 jquery.cityselect.js"></script> 

  <script type="text/javascript"> 

  $(function(){ 

  $("#city").citySelect({ 

  nodata:"none", 

  required:false 

});

});

  </script> 

  <div id="city" > 

  <select id="specificArea1" name="specificArea1" class="prov" ></select> 

  <select id="specificArea2" name="specificArea2" class="city" disabled="disabled"></select> 

  <select id="specificArea3" name="specificArea3" class="dist" disabled="disabled"></select> 

  </div> 

  关于这个联动的实现用到一个插件 
 jquery.cityselect.js,该插件如下： 

/*

  settings 参数说明 

  ----- 

  url:省市数据josn文件路径 

  prov:默认省份 

  city:默认城市 

  dist:默认地区（县） 

  nodata:无数据状态 

  required:必选项 

  ------------------------------ */ 

  (function($){ 

  $.fn.citySelect=function(settings){ 

  if(this.length<1){return;}; 

  // 默认值 

  settings=$.extend({ 

 
 url:"InfoUtil.action",//此处需要的格式是json格式， 

  prov:null, 

  city:null, 

  dist:null, 

  nodata:null, 

  required:true 

  },settings); 

  var box_obj=this; 

  var prov_obj=box_obj.find(".prov"); 

  var city_obj=box_obj.find(".city"); 

  var dist_obj=box_obj.find(".dist"); 

  var prov_val=settings.prov; 

  var city_val=settings.city; 

  var dist_val=settings.dist; 

  var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>"; 

  var city_json; 

  // 赋值市级函数 

  var cityStart=function(){ 

  var prov_id=prov_obj.get(0).selectedIndex; 

  if(!settings.required){ 

  prov_id--; 

};

  city_obj.empty().attr("disabled",true); 

  dist_obj.empty().attr("disabled",true); 

  if(prov_id<0||typeof(city_json.citylist[prov_id].c)=="undefined"){ 

  if(settings.nodata=="none"){ 

  city_obj.css("display","none"); 

  dist_obj.css("display","none"); 

  }else if(settings.nodata=="hidden"){ 

  city_obj.css("visibility","hidden"); 

  dist_obj.css("visibility","hidden"); 

};

  return; 

};

  // 遍历赋值市级下拉列表 

  temp_html=select_prehtml; 

  $.each(city_json.citylist[prov_id].c,function(i,city){ 

  temp_html+="<option value='"+city.n+"'>"+city.n+"</option>"; 

});

  city_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""}); 

  distStart(); 

};

  // 赋值地区（县）函数 

  var distStart=function(){ 

  var prov_id=prov_obj.get(0).selectedIndex; 

  var city_id=city_obj.get(0).selectedIndex; 

  if(!settings.required){ 

  prov_id--; 

  city_id--; 

};

  dist_obj.empty().attr("disabled",true); 

  if(prov_id<0||city_id<0||typeof(city_json.citylist[prov_id].c[city_id].a)=="undefined"){ 

  if(settings.nodata=="none"){ 

  dist_obj.css("display","none"); 

  }else if(settings.nodata=="hidden"){ 

  dist_obj.css("visibility","hidden"); 

};

  return; 

};

  // 遍历赋值市级下拉列表 

  temp_html=select_prehtml; 

  $.each(city_json.citylist[prov_id].c[city_id].a,function(i,dist){ 

  temp_html+="<option value='"+dist.s+"'>"+dist.s+"</option>"; 

});

  dist_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""}); 

};

  var init=function(){ 

  // 遍历赋值省份下拉列表 

  temp_html=select_prehtml; 

  $.each(city_json.citylist,function(i,prov){ 

  temp_html+="<option value='"+prov.p+"'>"+prov.p+"</option>"; 

});

  prov_obj.html(temp_html); 

  // 若有传入省份与市级的值，则选中。（setTimeout为兼容IE6而设置） 

  setTimeout(function(){ 

  if(settings.prov!=null){ 

  prov_obj.val(settings.prov); 

  cityStart(); 

  setTimeout(function(){ 

  if(settings.city!=null){ 

  city_obj.val(settings.city); 

  distStart(); 

  setTimeout(function(){ 

  if(settings.dist!=null){ 

  dist_obj.val(settings.dist); 

};

  },1); 

};

  },1); 

};

  },1); 

  // 选择省份时发生事件 

  prov_obj.bind("change",function(){ 

  cityStart(); 

});

  // 选择市级时发生事件 

  city_obj.bind("change",function(){ 

  distStart(); 

});

};

  // 设置省市json数据 

  if(typeof(settings.url)=="string"){ 

  $.getJSON(settings.url,function(json){ 

  city_json=json; 

  init(); 

});

  }else{ 

  city_json=settings.url; 

  init(); 

};

};

  })(jQuery); 

 
 拼接json的action类部分代码：只要拼接成json格式传递到前台就可以了，方法可以自己写 

  public String execute() throws Exception { 

  HttpServletResponse response = ServletActionContext.getResponse(); 

  StringBuffer json = new StringBuffer("{\"citylist\":["); 

  json.append("{\"p\":\"区级\",\"c\":["); 

  String sql = "; 

  List<Map<String, Object>> list1 = JDBCTool.doSQLQueryList( sql); 

  for(int i=0,len=list1.size();i<len;i++){ 

  Map<String,Object> map1 = list1.get(i); 

  json.append("{\"n\":\""+map1.get("xxx")+"\"}"); 

  if (i != list1.size() - 1) { 

  json.append(","); 

}

}

  json.append("]},"); 

  String sql2 = ""; 

  List<Map<String, Object>> list2 = JDBCTool.doSQLQueryList(sql2); 

  json.append("{\"p\":\"乡镇\",\"c\":["); 

  for(int j=0,len2=list2.size();j<len2;j++){ 

  Map<String,Object> map2 = list2.get(j); 

  String dept_unid = (String)map2.get("xxx"); 

  String sql3 = ""; 

  List<Map<String, Object>> list3 = JDBCTool.doSQLQueryList( sql3); 

  json.append("{\"n\":\""+map2.get("xxx")+"\",\"a\":["); 

  for(int k=0,len3=list3.size();k<len3;k++){ 

  Map<String,Object> map3 = list3.get(k); 

  json.append("{\"s\":\""+map3.get("xxx")+"\"}"); 

  if (k != list3.size() - 1) { 

  json.append(","); 

}

}

  json.append("]}"); 

  if (j != list2.size() - 1) { 

  json.append(","); 

}

}

  json.append("]},"); 

  String sql4 = ""; 

  List<Map<String, Object>> list4 = JDBCTool.doSQLQueryList(sql4); 

  json.append("{\"p\":\"社会组织\",\"c\":["); 

  for(int m=0,len4=list4.size();m<len4;m++){ 

  Map<String,Object> map4 = list4.get(m); 

  json.append("{\"n\":\""+map4.get("DEPT_NAME")+"\"}"); 

  if (m != list4.size() - 1) { 

  json.append(","); 

}

}

  json.append("]}]}"); 

  PrintUtil.print(response, json.toString()); 

  return null; 

}

关注

专栏目录