ssm 省市县三级联动

最新推荐文章于 2024-07-27 13:31:57 发布

旗木卡卡西zz

最新推荐文章于 2024-07-27 13:31:57 发布

阅读量732

点赞数

文章标签： java 三级联动

本文链接：https://blog.csdn.net/weixin_43470118/article/details/102796357

版权

实体类：

import java.io.Serializable;

public class Test implements Serializable{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private String proName;
	private String cityName;
	private String counName;
	public String getProName() {
		return proName;
	}
	public void setProName(String proName) {
		this.proName = proName;
	}
	public String getCityName() {
		return cityName;
	}
	public void setCityName(String cityName) {
		this.cityName = cityName;
	}
	public String getCounName() {
		return counName;
	}
	public void setCounName(String counName) {
		this.counName = counName;
	}

前段代码：

<body>
	<div align="center">
		<select id="select1">
			<option value="">----请选择省份----</option>
		</select> <select id="select2">
			<option value="">----请选择省份----</option>
		</select> <select id="select3">
			<option value="">----请选择省份----</option>
		</select>
	</div>
</body>
<script type="text/javascript" src="../jquery-3.2.1/jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(function() {
		//页面加载完成事件 填充省份
		$.ajax({
			url : "http://localhost:8003/CSD/test/getPro",
			type : "GET",
			dataType : "json",
			success : function(data) {
				console.log(data);
				for (var i = 0; i < data.length; i++) {
					var $option = $("<option></option>");
					$option.attr("value", data[i].proName);
					$option.text(data[i].proName);
					$("#select1").append($option);
				}
			}
		});
	});
	//省份的change事件 根据省份填充市区
	$("#select1").change(function() {
		$("#select2").html('<option value="">----请选择城市----</option>');
		$("#select3").html('<option value="">----请选择城市----</option>');
		var proName = $(this).val();
		$.ajax({
			url : "http://localhost:8003/CSD/test/getCity?proName=" + proName,
			type : "GET",
			dataType : "json",
			success : function(data) {
				console.log(data);
				for (var i = 0; i < data.length; i++) {
					var $option = $("<option></option>");
					$option.attr("value", data[i].cityName);
					$option.text(data[i].cityName);
					$("#select2").append($option);
				}
			}
		});
	});
	//市区的change事件 填充县
	$("#select2").change(function() {
		$("#select3").html('<option value="">----请选择城市----</option>');
		var cityName = $(this).val();
		$.ajax({
			url : "http://localhost:8003/CSD/test/getCoun?cityName=" + cityName,
			type : "GET",
			dataType : "json",
			success : function(data) {
				console.log(data);
				for (var i = 0; i < data.length; i++) {
					var $option = $("<option></option>");
					$option.attr("value", data[i].counName);
					$option.text(data[i].counName);
					$("#select3").append($option);
				}
			}
		});
	});

以下为controller相关代码：

@RequestMapping("/index")
	public String toIndex() {
		return "test";
	}
	
	@RequestMapping("/getPro")
	@ResponseBody
	public List<Test> getPro() {
		Test test1 = new Test();
		test1.setProName("河南");
		Test test2 = new Test();
		test2.setProName("陝西");
		Test test3 = new Test();
		test3.setProName("湖北");
		List<Test> list = new ArrayList<Test>();
		list.add(test1);
		list.add(test2);
		list.add(test3);
		return list;
	}
	
	@RequestMapping("/getCity")
	@ResponseBody
	public List<Test> getCity(String proName) {
		Test test1 = new Test();
		test1.setCityName("平頂山");
		Test test2 = new Test();
		test2.setCityName("郑州");
		Test test3 = new Test();
		test3.setCityName("驻马店");
		List<Test> list = new ArrayList<Test>();
		list.add(test1);
		list.add(test2);
		list.add(test3);
		return list;
	}
	
	@RequestMapping("/getCoun")
	@ResponseBody
	public List<Test> getCoun(String cityName) {
		System.out.println(cityName+"---");
		Test test1 = new Test();
		test1.setCounName("叶县");
		Test test2 = new Test();
		test2.setCounName("禹州");
		Test test3 = new Test();
		test3.setCounName("舞钢");
		List<Test> list = new ArrayList<Test>();
		list.add(test1);
		list.add(test2);
		list.add(test3);
		return list;
	}

由于只是简单的实现了三级联动，并没有牵扯到数据库，所以数据都是造的，前端页面也并没有任何样式，哪里写的不对希望大神指正！

旗木卡卡西zz

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
ssm 省市县三级联动

实体类：import java.io.Serializable;public class Test implements Serializable{ /** * */ private static final long serialVersionUID = 1L; private String proName; private String cityName; priv...
复制链接

扫一扫