JS、JSP省市区切换

悠悠 2022-08-05 07:41 183阅读 0赞

上述为JSP代码。

$(document).ready(function () {
    	$.post("userAction!getAllProvince", function (data) {
    	    	var jsonObj = eval("(" + data + ")");
    	    	for (var i = 0; i < jsonObj.length; i++) {
    	    		var $option = $("<option></option>");
    	    		var row=jsonObj[i];
    	    		$option.attr("value", row[0]);
    	    		$option.text(row[1]); 
    	    		$("#province").append($option);
    	    	}
    	});
    	    	/* 根据省份获取城市 */
    	$("#province").change(function () { 
    		$.post("userAction!getCityByPid", {pid:$("#province").val()}, function (data) {
    	    		/* 清空城市 */
    	    		$("#city option[value!='']").remove();
    	    		/* 清空乡镇 */
    	    		$("#district option[value!='']").remove();
    	    		var jsonObj = eval("(" + data + ")");
    	    		for (var i = 0; i < jsonObj.length; i++) {
    	    			var $option = $("<option></option>");	    				 
    	        		var row=jsonObj[i];
    	        		$option.attr("value", row[0]);
    		    		$option.text(row[1]); 
    	    			$("#city").append($option);
    	    		}
    	    	});
    	});
    	    	/* 根据城市获取乡镇 */
    	$("#city").change(function () { 
    		if($("#district").length>0){
    			$.post("userAction!getDistrictByCid", {cid:$("#city").val()}, function (data) {
    		    		/* 清空乡镇 */
    		    		$("#district option[value!='']").remove();
    		    		var jsonObj = eval("(" + data + ")");
    		    		for (var i = 0; i < jsonObj.length; i++) {
    		    			var $option = $("<option></option>");
    		    			var row=jsonObj[i];
    		        		for(var p in row) {	
    						$option.attr("value", row[0]);
    		        			$option.text(row[p]);
    		        		}
    		    			$("#district").append($option);
    		    		}
    		    	});
    	    	}
    <span style="white-space:pre">	</span>});
    });

上述为所有JS代码。

public void getAllProvince(HttpServletResponse response) {
    		List<Province> provinceList = provinceidao.getAllPProvince();
    		JSONArray jsonArray = JSONArray.fromObject(provinceList);
    		try {
    			CommonUtil.printResult(response,jsonArray);
    		} catch (IOException e) {
    		<span style="white-space:pre">	</span>e.printStackTrace();
    		}
    }

/**
    	 * 获取城市
    	 */
    	public void getCityByPid(int pid,HttpServletResponse response) { 
    		List<City> cityList = cityidao.getByPidCitys(pid);
    		JSONArray jsonArray = JSONArray.fromObject(cityList);
    		try {
    			CommonUtil.printResult(response, jsonArray);
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		 
    	}

/**
    	 * 获取乡镇
    	 */
    	public void getDistrictByCid(int cid,HttpServletResponse response) {
    		List<District > districtList = districtidao.getByCidDistricts(cid);
    		JSONArray jsonArray = JSONArray.fromObject(districtList);
    		try {
    			CommonUtil.printResult(response, jsonArray);
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    	}

上述为action中代码。

action中返回给JS的数据格式：

[[1,"北京市"],[2,"天津市"],[3,"河北省"],[4,"山西省"],[5,"内蒙古自治区"],[6,"辽宁省"],[7,"吉林省"],[8,"黑龙江省"],[9,"上海市"],[10,"江苏省"],[11,"浙江省"],[12,"安徽省"],[13,"福建省"],[14,"江西省"],[15,"山东省"],[16,"河南省"],[17,"湖北省"],[18,"湖南省"],[19,"广东省"],[20,"广西壮族自治区"],[21,"海南省"],[22,"重庆市"],[23,"四川省"],[24,"贵州省"],[25,"云南省"],[26,"西藏自治区"],[27,"陕西省"],[28,"甘肃省"],[29,"青海省"],[30,"宁夏回族自治区"],[31,"新疆维吾尔自治区"],[32,"香港特别行政区"],[33,"澳门特别行政区"],[34,"台湾省"]]

市、区返回格式也同样。