省份，城市，县，镇四级select级联

2024-04-27 15:03:44

字体：大中小

来源：转载

供稿：网友

本篇是个人所写，虽然基本功能需求都达到了，但是总觉得太繁琐，应该有更好的方法，望评证！

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

js部分

openProvinceList();openCityList();openCountyList();openTownList();});

//查询省份信息function openProvinceList(){$.Ajax({type:"post",url:"servlet/api?action=Address&cmd=getProvince",//数据库查询数据dataType:'json',data:{proviceId:$("#province").val()},success:function(j){if(j.code == 1 || j.code == "1"){$("#province option[index != '0']").remove();//添加数据前要先清理上次的数据，否则会在后面追加option，总觉得有更好的方法，望指正for(var i=0;i<j.data.length;i++){var op = new Option(j.data[i].provinceName,j.data[i].provinceCode);/* $("#province").append("<option value="+j.data[i].provinceCode+">"+j.data[i].provinceName+"</option>"); */$("#province").append(op);}}else{alert("查询有误！");} }});}//查询对应的城市信息function openCityList(){var provinceCode = $("#province").val();if(provinceCode){$.ajax({type:"post",url:"servlet/api?action=Address&cmd=getCity",//数据库查询数据dataType:'json',data:{provinceId:provinceCode},success:function(j){if(j.code == 1 || j.code == "1"){$("#city option[index != 0]").remove();;//添加数据前要先清理上次的数据，否则会在后面追加option，之所以index！=0是因为index=0正好是“”“--请选择--”这个option，这个是我们需要的，所以保留第一条数据for(var i=0;i<j.data.length;i++){var op = new Option(j.data[i].cityName,j.data[i].cityCode);/* $("#city").append("<option value="+j.data[i].cityCode+">"+j.data[i].cityName+"</option>"); */ //此处将其注释，其实两种写法一样，未注释的部分不需要拼写字符串，简便些$("#city").append(op);}}else{alert("查询有误！");} }});}else{$("#city option[index != 0]").remove(); //这三处删除目的是，当省份选择到“----请选择-----”的时候，市、县、镇也应该是‘----请选择---’，所以要将上次查询的缓存数据清除$("#county option[index !=0]").remove();$("#town option[index !=0]").remove();}}//查询对应的县区信息function openCountyList(){var provinceCode = $("#province").val();var cityCode = $("#city").val();if(provinceCode){if(cityCode){$.ajax({type:"post",url:"servlet/api?action=Address&cmd=getCounty",dataType:'json',data:{provinceId:provinceCode,cityId:cityCode},success:function(j){if(j.code == 1 || j.code == "1"){$("#county option[index != '0']").remove();;//添加数据前要先清理上次的数据，否则会在后面追加optionfor(var i=0;i<j.data.length;i++){$("#county").append("<option value="+j.data[i].countyCode+">"+j.data[i].countyName+"</option>");}}else{alert("查询有误！");} }});}else{$("#county option[index !=0]").remove();$("#town option[index != 0]").remove();}}else{$("#city option[index != 0]").remove();}}//查询对应的镇信息function openTownList(){var provinceCode = $("#province").val();var cityCode = $("#city").val();var countyCode = $("#county").val();if(provinceCode){if(cityCode){if(countyCode){$.ajax({type:"post",url:"servlet/api?action=Address&cmd=getTown",dataType:'json',data:{provinceId:provinceCode,cityId:cityCode,countyId:countyCode},success:function(j){$("#town option[index != '0']").remove();;//添加数据前要先清理上次的数据，否则会在后面追加optionif(j.code == 1 || j.code == "1"){for(var i=0;i<j.data.length;i++){$("#town").append("<option value="+j.data[i].townCode+">"+j.data[i].townName+"</option>");}}else{alert("查询有误！");} }});}else{$("#town option[index !=0]").remove();}}else{$("#county option[index !=0]").remove();}}else{$("#city option[index !=0]").remove();}}

</script>

....................................................................................................................................................................................................................

java查询语句部分

public class AddressService {/*** 获取所有省份信息* @return*/public String getProvince(HttpServletRequest request,HttpServletResponse response){String provinceId = request.getParameter("provinceId");String sql = "select * from province";if(DataUtils.stringIsNotBlank(provinceId)){sql = sql + " where provinceCode = "+provinceId;}List<?> list = DataUtils.query(sql, null, Province.class);JSONArray array = JSONArray.fromObject(list);JSONObject jsonObject = new JSONObject();jsonObject.put("code","1");jsonObject.put("data", array);return jsonObject.toString();}/*** 获取省份对应的城市信息* @return*/public String getCity(HttpServletRequest request,HttpServletResponse response){String provinceId = request.getParameter("provinceId");String sql = "select * from city";if(DataUtils.stringIsNotBlank(provinceId)){sql = sql + " where provinceCode = "+provinceId;}List<?> list = DataUtils.query(sql, null, City.class);JSONArray array = JSONArray.fromObject(list);JSONObject jsonObject = new JSONObject();jsonObject.put("code","1");jsonObject.put("data", array);System.out.println(jsonObject.toString());return jsonObject.toString();}/*** 获取城市对应的县区信息* @return*/public String getCounty(HttpServletRequest request,HttpServletResponse response){String provinceId = request.getParameter("provinceId");String cityId = request.getParameter("cityId");String sql = "select * from county";if(DataUtils.stringIsNotBlank(provinceId) && DataUtils.stringIsNotBlank(cityId)){sql = sql + " where provinceCode = "+provinceId+" and cityCode="+cityId;}List<?> list = DataUtils.query(sql, null, County.class);JSONArray array = JSONArray.fromObject(list);JSONObject jsonObject = new JSONObject();jsonObject.put("code","1");jsonObject.put("data", array);System.out.println(jsonObject.toString());return jsonObject.toString();}/*** 获取县区对应的镇信息* @return*/public String getTown(HttpServletRequest request,HttpServletResponse response){String provinceId = request.getParameter("provinceId");String cityId = request.getParameter("cityId");String countyId = request.getParameter("countyId");String sql = "select * from Town";if(DataUtils.stringIsNotBlank(provinceId) && DataUtils.stringIsNotBlank(cityId) && DataUtils.stringIsNotBlank(countyId)){sql = sql + " where provinceCode = "+provinceId+" and cityCode="+cityId+" and countyCode="+countyId;}List<?> list = DataUtils.query(sql, null, Town.class);JSONArray array = JSONArray.fromObject(list);JSONObject jsonObject = new JSONObject();jsonObject.put("code","1");jsonObject.put("data", array);System.out.println(jsonObject.toString());return jsonObject.toString();}}

上一篇：网页中防止双击选中html中文字

下一篇：前端学习笔记10 使用CSS3进行样式效果增强