【JQuery】使用JQuery实现城市两级或三级联动（下拉菜单）

Dear 丶 2022-09-27 04:50 168阅读 0赞

本文只要是通过使用JQuery实现城市（省、市、县）两级或三级联动，并使用下拉菜单展现。主要的代码如下：

1、在Controller中的代码：

@RequestMapping(value="/tourAreaAdd.htm")
    	public String toTourAreaAdd(HttpServletRequest request, Integer shoppingTourRulesId,
    			HttpServletResponse reponse, ModelMap model,SupplierInfo supplierInfo){
    		//获取省份
    		List<RegionInfo> allProvince = regionService.getAllProvince();
    		model.addAttribute("allProvince", allProvince);
    		
    		//获取市级
    		List<RegionInfo> cityList = regionService.getRegionById(supplierInfo .getProvinceId() + "");
    		model.addAttribute("cityList", cityList);
    		
    		//获取区县级
    		List<RegionInfo> areaList = regionService.getRegionById(supplierInfo.getCityId() + "");
    		model.addAttribute("areaList", areaList);
    		
    		model.addAttribute("shoppingTourRulesId", shoppingTourRulesId);
    		return "shoppingRule/groupRule/shoppingTourAreaAdd";
    	}

2、Service方法实现：

@Override
    	public List<RegionInfo> getAllProvince() {
    		List<RegionInfo> provinces=null;
    		Object obj = JedisManager.getObject(BasicConstants.REGION_KEY_PREFIX+0);
    		if (obj!=null) {
    			logger.info("读取redis");
    			provinces=(List<RegionInfo>)obj;
    			return provinces;
    		}else {
    			
    			return regionMapper.getAllProvince();
    		}
    	}

@Override
    	public List<RegionInfo> getRegionById(String pid) {
    		if(StringUtils.isNumeric(pid)){
    		List<RegionInfo> regionList = null;
    				Object obj = JedisManager.getObject(BasicConstants.REGION_KEY_PREFIX+pid);
    		if (obj!=null) {
    			logger.info("读取redis");
    			regionList=(List<RegionInfo>)obj;
    			return regionList;
    		}
    		else {
    			Integer parent = Integer.valueOf(pid);
    			return regionMapper.getRegionById(parent);			
    		}
    		}
    		return null;
    	}

在BasicConstants中REGION\_KEY\_PREFIX的定义如下：

/**
         * 地区查询拼接字符串
         */
        public static String REGION_KEY_PREFIX="REGION_KEY_PREFIX";

3、JSP页面以及对应的JS实现如下：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    <%@ page contentType="text/html;charset=UTF-8" language="java"%>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>添加城市信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%@ include file="../../../include/top.jsp"%>
    <%
    	String path = ctx;
    %>
    <style type="text/css">
    	#span_id{
    		color: red;
    	}
    </style>
    </head>
    <body class="blank_body_bg">
    	<form id="saveTourAreaForm" style="margin-left: 10px;">
    		<input type="hidden" id="shoppingTourRulesId" name="shoppingTourRulesId" value="${shoppingTourRulesId }"/>
    		 <div class="p_container blank_page_bg"  >
    	    	<dl class="p_paragraph_content">
    	    		<dd>
    	    			<div class="dd_left">请选择：</div>
    	    			<div class="dd_right">
    	    				<select name="provinceId" id="provinceCode" style="width: 100px; text-align: right;">
    							<option value="">请选择省</option>
    							<c:forEach items="${allProvince}" var="province">
    								<option value="${province.id }"
    								<c:if test="${province.id==supplierInfo.provinceId }">selected="selected"</c:if>>${province.name }</option>
    							</c:forEach>
    						</select> 
    						<select name="cityId" id="cityCode" style="width: 100px; text-align: right;">
    							<option value="">请选择市</option>
    							<c:forEach items="${cityList }" var="city">
    								<option value="${city.id }"
    									<c:if test="${city.id==supplierInfo.cityId }">selected="selected"</c:if>>${city.name }</option>
    							</c:forEach>
    						</select> 
    						<select name="areaId" id="areaCode" style="width: 100px; text-align: right;">
    							<option value="">请选择区县</option>
    								<c:forEach items="${areaList }" var="area">
    								<option value="${area.id }"
    									<c:if test="${area.id==supplierInfo.areaId }">selected="selected"</c:if>>${area.name }</option>
    							</c:forEach>
    						</select>
    	    			</div>
    	    		</dd>
    	    	</dl>
    	    </div>
    	</form>
    </body>
    <script type="text/javascript">
    $(function() {
    	$("#provinceCode").change(
    		function() {
    			var text = $("#provinceCode").find("option:selected").text();
    			if(text!='请选择省'){
    				$("#pValue").html(text);
    			}
    			$("#cValue").html("");
    			$("#aValue").html("");
    			$("#tValue").html("");
    			$("#cityCode").html("<option value=''>请选择市</option>");
    			$("#areaCode").html("<option value=''>请选择区县</option>");
    			$("#townCode").html("<option value=''>请选择街道</option>");
    			if($("#provinceCode").val()!=''){
    				$.getJSON("../basic/getRegion.do?id=" + $("#provinceCode").val(), function(data) {
    					data = eval(data);
    					var s = "<option value=''>请选择市</option>";
    					$.each(data, function(i, item) {
    						s += "<option value='" + item.id + "'>" + item.name
    								+ "</option>";
    					});
    					$("#cityCode").html(s);
    	
    				});
    			}
    		}
    	);
    	
    	$("#cityCode").change(
    		function() {
    			var text = $("#cityCode").find("option:selected").text();
    			if(text!='请选择市'){
    				$("#cValue").html(text);
    			}
    			$("#aValue").html("");
    			$("#tValue").html("");
    			$("#areaCode").html("<option value=''>请选择区县</option>");
    			$("#townCode").html("<option value=''>请选择街道</option>");
    			if($("#cityCode").val()!=''){
    				$.getJSON("../basic/getRegion.do?id=" + $("#cityCode").val(),function(data) {
    					data = eval(data);
    					var s = "<option value=''>请选择区县</option>";
    					$.each(data, function(i, item) {
    						s += "<option value='" + item.id + "'>"
    								+ item.name + "</option>";
    					});
    					$("#areaCode").html(s);
    				});
    			}
    		}
    	);
    	$("#areaCode").change(
    		function() {
    			var text = $("#areaCode").find("option:selected").text();
    			if(text!='请选择区县'){
    				$("#aValue").html(text);
    			}
    			$("#tValue").html("");
    			$("#townCode").html("<option value=''>请选择街道</option>");
    			if($("#areaCode").val()!=''){
    			$.getJSON("../basic/getRegion.do?id=" + $("#areaCode").val(),
    				function(data) {
    					data = eval(data);
    					var s = "<option value=''>请选择街道</option>";
    					$.each(data, function(i, item) {
    						s += "<option value='" + item.id + "'>"
    								+ item.name + "</option>";
    					});
    					$("#townCode").html(s);
    
    				});
    			}
    		}
    	);
    	$("#townCode").change(
    		function() {
    			var text = $("#townCode").find("option:selected").text();
    			if(text!='请选择街道'){
    				$("#tValue").html(text);
    			}
    			
    		}
    	)
    });
    
    /* 获取省市县 */
    function getAreaInfo(){
    	var dataObj = [];
    	var provinceName = $("#provinceCode").find("option:selected");
    	var cityName = $("#cityCode").find("option:selected");
    	var areaName = $("#areaCode").find("option:selected");
    	var shoppingTourRulesId = $("input[name='shoppingTourRulesId']");
    	
    	var data = {};
    	data.shoppingTourRulesId = shoppingTourRulesId.val();
    	data.provinceId = provinceName.val();
    	data.provinceName = provinceName.text();
    	data.cityId = cityName.val();
    	data.cityName = cityName.text();
    	data.areaName = areaName.text();
    	dataObj.push(data);
    	return dataObj;
    }
    
    </script>
    </html>

4、getRegion.do 请求方法：

@RequestMapping(value="getRegion.do")
    	@ResponseBody
    	public String getReg(HttpServletRequest request){
    		String id = request.getParameter("id");
    		String name = request.getParameter("name");
    		String level = request.getParameter("level");
    		JSONArray jsonArray=new JSONArray();  
    		if(StringUtils.isBlank(id)){
    			return jsonArray.toJSONString();
    		}
    		List<RegionInfo> dicRegions = regionService.getRegionById(id);
    		if(dicRegions==null || dicRegions.size()==0){
    			return jsonArray.toJSONString();
    		}
    		for (RegionInfo dicRegion : dicRegions) {
    			JSONObject jsonObject=new JSONObject();  
    	        jsonObject.put("id",dicRegion.getId());  
    	        jsonObject.put("pid",dicRegion.getPid());  
    	        jsonObject.put("name",dicRegion.getName()); 
    	        jsonObject.put("level", dicRegion.getLevel());
    	        if(dicRegion.getLevel()!=4){
    	        	 jsonObject.put("isParent", true);
    	        }
    	        jsonArray.add(jsonObject);
    		}
    		return jsonArray.toJSONString();  
    	}

5、效果如下：

4![SouthEast][]

![SouthEast 1][]

![SouthEast 2][]

![SouthEast 3][]

完毕！！

[SouthEast]: /images/20220708/33a855b15a6c4040b3260d9990ca318f.png
[SouthEast 1]: /images/20220708/b488d13617be49a59d8a55b1e8e004f4.png
[SouthEast 2]: /images/20220708/30cd219877314947a85c34c78b31f5c4.png
[SouthEast 3]: /images/20220708/860f5248420f4ad4813e5f584a3efbb6.png