实体类:
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;
}
由于只是简单的实现了三级联动,并没有牵扯到数据库,所以数据都是造的,前端页面也并没有任何样式,哪里写的不对希望大神指正!