后台代码如下
/** * 访问首页并加载省信息 * @return */ @RequestMapping("/index.shtml") public String index( Model model){ List<Provinces> list = provinceServince.findAllProvince(); model.addAttribute("provinces", list); return "index"; } /** * 查询城市 * @return */ //@RequestParam(value="proid") @RequestMapping("/queryCity.shtml") @ResponseBody public void queryCity(Integer proid,HttpServletResponse response,Model model){ try { List<Cities> list = cityService.findCityByProvince(proid); JSONArray json = JSONArray.fromObject(list); System.out.println("查询城市"); response.setCharacterEncoding("UTF-8"); response.setContentType("text/html;character=utf-8"); response.getWriter().println(json); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } 页面代码如下 选择省： <select name="p" id="p" οnchange="city()"> <option>===请选择省===</option> <c:forEach items="${provinces}" var="province"> <option value="${province.provinceid}" >${province.province }</option> </c:forEach> </select> 选择市： <select name="c" id="c"> <option>===请选择市===</option> </select> js代码如下 <script type="text/javascript" language="javascript" src="./js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> function city(){ //alert("aaa"); //省份的id var proid = $("#p").val(); //proid.empty(); $.ajax({ type: "post" , url: "/queryCity.shtml"+"?"+proid, data: {"proid":proid}, dataType: "json", success : function (data){ //城市下拉菜单id var c = $("#c"); //清空菜单 c.empty(); //json格式的城市对象数组 var citys = eval(data); $.each(citys,function(index , item){ //城市名称与id var cname = citys[index].city; var cid = citys[index].cityid; c.append("<option value='"+cid+"'>"+cname+"</option>"); }); } }); } </script>其实如果用springmvc的话可以把省信息在controller带到页面遍历，市下拉框在用ajax做联动比较省事
