数据库有两张表,省份表和城市表。城市表有外键--省份ID
首先是前端页面上的内容(城市信息也可以从数据库取,不过我偷懒,就直接写在页面了)
<div class="set-box"><label class="box-title">所在城市</label><select class="newmap"> <option value="北京" selected="selected">北京</option> <option value="上海">上海</option> <option value="广东">广东</option> <option value="深圳">深圳</option> <option value="天津">天津</option> <option value="江苏">江苏</option> <option value="浙江">浙江</option> <option value="河北">河北</option> <option value="山西">山西</option> <option value="内蒙古">内蒙古</option> <option value="辽宁">辽宁</option> <option value="吉林">吉林</option> <option value="黑龙江">黑龙江</option> <option value="安徽">安徽</option> <option value="福建">福建</option> <option value="江西">江西</option> <option value="山东">山东</option> <option value="河南">河南</option> <option value="湖北">湖北</option> <option value="湖南">湖南</option> <option value="广西">广西</option> <option value="海南">海南</option> <option value="重庆">重庆</option> <option value="四川">四川</option> <option value="贵州">贵州</option> <option value="云南">云南</option> <option value="西藏">西藏</option> <option value="陕西">陕西</option> <option value="甘肃">甘肃</option> <option value="青海">青海</option> <option value="宁夏">宁夏</option> <option value="新疆">新疆</option> <option value="台湾">台湾</option> <option value="香港">香港</option> <option value="澳门">澳门</option> </select> <select class="is2"> </select> </div>然后js代码
$(".newmap").change(function (e) { var thistext = $(this).val(); $.getJSON("你提交的uri?", {"thistext": thistext}, function(result){ var is2HTML = ""; $.each(result, function(i, field){ is2HTML += "<option value="+ field +">"+ field +"</option>" }); $(".is2").html(is2HTML); }); e.stopPropagation(); });
最后是后台controller(就是你提交的地方)
@RequestMapping("/findCity") public void findCity(HttpServletRequest request, HttpServletResponse response) throws IOException{ request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String thistext = request.getParameter("thistext"); //自己写的通过省份名称查找到省份ID, Country country = countryService.selectCountryId(thistext); Integer id = country.getCountryId(); //通过省份ID查找到城市 List<City> city = cityService.selectByCountryId(id); List<String> cityName = new ArrayList<>(); for (int i = 0; i < city.size(); i++) { cityName.add(city.get(i).getCityName()); } //利用fastjson将list转成String String listjson = JSON.toJSONString(cityName); //传回页面 response.getWriter().append(listjson);