jquery二级联动

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;
	}