html代码
$(function() {
// 1.页面加载的时候,去请求加载第一个select数据,然后动态生成option
$.ajax({
url: 'oneselect',
type: 'post',
success(data) {
console.log(data);
for (let i in data) {
$('#one').append('<option value=' + i + '>' + data[i] + '</option>')
}
},
error() {
alert('请求错误')
}
})
//2.获得数据后,拿value值在去请求第二个select的数据
$('#one').change(function() {
if (this.value != 0) {
console.log(this.value);
$.ajax({
url: 'twoselect',
type: 'post',
contentType: 'application/text',
data: this.value,
success(data) {
//填充第二个select的option
//这里只返回一个字符串,所以不用遍历,如果返回List或者List<Map>则需要遍历
$('#two').append('<option >' + data + '</option>')
},
error() {
alert('请求错误')
}
})
}
})
})
java代码,模拟的假数据
@RequestMapping("/oneselect")
@ResponseBody
public HashMap<String, Object> submitForm() {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("1", "一班");
map.put("2", "二班");
map.put("3", "三班");
return map;
}
@RequestMapping("/twoselect")
@ResponseBody
public String submitForm2(@RequestBody String str) {
System.out.println(str);
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("1", "一班的娜扎");
map.put("2", "二班的热巴");
map.put("3", "三班的亦非");
String string = (String) map.get(str);
return string;
}