다중 셀렉트 박스 만들기

DB에서 group 테이블 안 쪽에 grade, groupName 등의 칼럼이 있었고,

먼저 중분류로 어떤 grade를 선택하는지에 따라 걔한테 맞는 groupName이 나오도록 하고 싶었다.

(맨 처음에 class라고 했다가 자바에서 클래스 이름 class로 하면 안 된다길래 group으로 전부 수정.. DB까지)

<write.jsp 코드>

<select name="grade" class="select select-success w-full max-w-xs" onchange="setSelectBox(this)">
    <option value="">학년</option>
    <option value="elementary">초등</option>
    <option value="middle">중등</option>
    <option value="high">고등</option>
</select>
<select name="classId" id="group" class="select select-success w-full max-w-xs">
    <option value="">전체</option>
</select>

<script 코드>

<script>
	function setSelectBox(grade) {
		$('#group').html(`<option value="">전체</option>`);
		
		let gradeVal = grade.value;
		
		$.get('setSelectBox', {
			grade : gradeVal
		}, function(data) {
			console.log(data);
			for(var i = 0; i < data.data1.length; i++) {
				let groupName = data.data1[i].groupName;
				let classId = data.data1[i].id;
				console.log(groupName);
				$('#group').append(`<option value="`+classId+`">`+groupName+`</option>`);
			}
		}, 'json');
	}
</script>

<controller 코드>

@RequestMapping("/project/article/setSelectBox")
	@ResponseBody
	public ResultData setSelectBox(String grade) {
		List<Group> groups = groupService.getGroupsByGrade(grade);
		
		if(groups == null) {
			return ResultData.from("F-1", "선택한 학년에 맞는 반이 없습니다");
		}
		
		return ResultData.from("S-1", "선택한 학년에 맞는 반을 가져왔습니다", "groups", groups);
	}

이렇게 적어주면 된당~!!

data1의 값이 array인건 처음이라서 헷갈렸음!!!

중간중간 console.log()로 내가 표현하고 싶은 값 확인하면서 하면 됨!