idea-ssm汽车修配厂（九）省市县三级联动【含sql下载地址】

本文链接：https://blog.csdn.net/weixin_42275175/article/details/100084336

前端

function getCity() {
	//清空市和县下面所有的option选项
	$("#selcity option[value!=0]").remove();
	$("#selarea option[value!=0]").remove();
	
	var object = $("#selprovince");
	if (object.val() != 0) {
		$.ajax( {
			type :'post',
			url :"${ctx}/login/getCity?parentId="+object.val(),
			dataType :'json',
			success : function(result) {
				$.each(result, function(entryIndex, entry) {
					var html = "<option value='" + entry["id"] + "'>"
							+ entry["name"] + "</option>";
					$("#selcity").append(html);
				});
			}
		});
	}

}

function getArea() {
	$("#selarea option[value!=0]").remove();
	var object = $("#selcity");
	if (object.val() != 0) {
		$.ajax( {
			type :'post',
			url :"${ctx}/login/getCity?parentId="+object.val(),
			dataType :'json',
			success : function(result) {
				$.each(result, function(entryIndex, entry) {
					var html = "<option value='" + entry["id"] + "'>"
							+ entry["name"] + "</option>";
					$("#selarea").append(html);
				});
			}
		});
	}

省市县

      <select  id="selprovince" onchange="getCity()" class="city-area" name="procince">
                            <option value="0">-请选择省份-</option>
                        </select>
                        <select id="selcity" onchange="getArea()" class="city-area" name="city">
							<option value="0">-请选择城市-</option>
                        </select>
                        <select id="selarea" class="city-area"  name="contry">
        				<option value="0">-请选择地区-</option>
                        </select>

注意前端需要的是一个json数组，那么我们后端通过（ResponseBody）就返回一个数组给它

@RequestMapping("getCity")
	public @ResponseBody
	List<City> getCity(Integer parentId) {
		parentId=parentId==null?SysConstant.CITY_CHINA_ID:parentId;
		List<City> cityList=cityService.findCitysByparentId(parentId);

		return cityList;
	}

附上城市下载的sql地址

链接: https://pan.baidu.com/s/1tTwAIyYKlTWMUy2FP7AxGg 提取码: 8qyk