[Spring][쇼핑몰 프로젝트][18] 상품 등록 - 카테고리 리스트 구현 - 3

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

전달받은 JSON 데이터를 활용 카테고리 리스트 <select>, <option> 태그 출력

 저번 포스팅에 이어서 카테고리 리스트 구현을 마무리합니다.

 

 

 

순서

1. 대분류 <option>

2. 중분류 <option>

3. 소분류 <option>

4. 중분류 메서드 추가 작업

5. 테스트

 

 

1. 대분류 <option>

 'for'문과 Jquery의 'append'를 이용해서 <select> 태그 내부에 <option> 태그를 추가해줄 것입니다. <script> 태그 내부에 아래의 Javascript코드를 추가합니다.

 

	for(let i = 0; i < cate1Array.length; i++){
		cateSelect1.append("<option value='"+cate1Array[i].cateCode+"'>" + cate1Array[i].cateName + "</option>");
	}

 

그림 1-1

 

 서버를 구동시켜서 확인을 해보면 아래와 같이 <option> 태그가 추가된 것을 볼 수 있습니다.

 

 

 

 

2. 중분류 <option>

 중분류 <select> 태그에 <opion> 태그를 추가되도록 해야 하는데, 대분류의 옵션이 선택되었을 때 출력이 되어야 합니다. 따라서 대분류 옵션이 선택되었을 때 실행하는 메서드를 먼저 추가합니다.

 

	/* 중분류 <option> 태그 */
	$(cateSelect1).on("change",function(){
		
	});

 

그림 2-1

 

 메서드 내에서 처리할 작업의 순서는 다음과 같습니다.

 

대분류 선택 값 가져오기
=> 중분류 <option> 태그 모두 지우기
=> 중분류 기본 <option> 태그 추가
=> 대분류 선택 값과 일치하는 'cateParent'값을 가진 중분류 <option> 태그 출력

 

 굳이 <option> 태그를 모두 지우고 다시 추가하는 이유는 사용자가 대분류 선택하 다시 다른 대분류를 선택했을 때 기존의 <option> 태그들을 없애기 위함입니다.

 

 대분류 선택 값을 가져오는 코드를 추가합니다.

 

	/* 중분류 <option> 태그 */
	$(cateSelect1).on("change",function(){
		
		let selectVal1 = $(this).find("option:selected").val();	
		
	});

 

 

 중분류 <option> 태그를 지우고 기본적인 <option> 태그를 추가하는 코드를 추가합니다.

 

	/* 중분류 <option> 태그 */
	$(cateSelect1).on("change",function(){
		
		let selectVal1 = $(this).find("option:selected").val();	
		
		cateSelect2.children().remove();
		
		cateSelect2.append("<option value='none'>선택</option>")
		
	});

 

 대분류 선택 값과 일치하는 'cateParent'값을 가진 중분류 <option> 태그를 출력하는 코드를 추가합니다.

 

	/* 중분류 <option> 태그 */
	$(cateSelect1).on("change",function(){
		
		let selectVal1 = $(this).find("option:selected").val();	
		
		cateSelect2.children().remove();
		
		cateSelect2.append("<option value='none'>선택</option>");
		
		for(let i = 0; i < cate2Array.length; i++){
			if(selectVal1 === cate2Array[i].cateParent){
				cateSelect2.append("<option value='"+cate2Array[i].cateCode+"'>" + cate2Array[i].cateName + "</option>");	
			}
		}// for
		
	});

 

그림 2-2

 

 상품 등록 페이지로 접속하여 대분류 선택 변경에 따라 중분류 <option> 태그들이 정상적으로 출력되는지 확인합니다.

 

그림 2-3

 

그림 2-4

 

3. 소분류 <option>

 소분류도 중분류와 동일한 형태의 코드를 작성해야 합니다. 소분류 <option> 태그가 출력되어야 할 시점은 중분류를 선택하였을 때입니다. 따라서 아래의 메서드 코드를 추가합니다.

 

	/* 소분류 <option>태그 */
	$(cateSelect2).on("change",function(){
		
		
	});		

 

 소분류의 메서드 또한 중분류의 메서드와 동일한 과정을 처리해야 합니다.

 

중분류 선택 값 가져오기
=> 소분류 <option> 태그 모두 지우기
=> 소분류 기본 <option> 태그 추가
=> 중분류 선택 값과 일치하는 'cateParent'값을 가진 소분류 <option> 태그 출력

 

 중분류의 선택 값을 가져오는 코드를 추가합니다.

 

	/* 소분류 <option>태그 */
	$(cateSelect2).on("change",function(){
		
		let selectVal2 = $(this).find("option:selected").val();
		
	});	

 

 소분류 <option> 태그를 모두 지우고, 기본 <option> 태그를 추가하는 코드를 작성합니다.

 

	/* 소분류 <option>태그 */
	$(cateSelect2).on("change",function(){
		
		let selectVal2 = $(this).find("option:selected").val();
		
		cateSelect3.children().remove();
		
		cateSelect3.append("<option value='none'>선택</option>");		
		
	});		

 

 소분류 <option>을 출력하는 코드를 추가합니다.

 

	/* 소분류 <option>태그 */
	$(cateSelect2).on("change",function(){
		
		let selectVal2 = $(this).find("option:selected").val();
		
		cateSelect3.children().remove();
		
		cateSelect3.append("<option value='none'>선택</option>");		
		
		for(let i = 0; i < cate3Array.length; i++){
			if(selectVal2 === cate3Array[i].cateParent){
				cateSelect3.append("<option value='"+cate3Array[i].cateCode+"'>" + cate3Array[i].cateName + "</option>");	
			}
		}// for		
		
	});		

 

그림 3-1

 

소분류 <option> 태그들이 정상적으로 출력되는지 확인합니다.

 

그림 3-2

 

그림 3-3

 

그림 3-4

 

그림 3-5

 

 

4. 중분류 메서드 추가 작업

 그런데 지금 현재의 코드에 문제가 하나 있습니다. 대분류, 중분류, 소분류 순으로 선택을 한 뒤 다시 대분류를 선택을 하게 되면 중분류는 정상적으로 기존의 코드가 없어지고 기본 <option> 태그가 출력이되는데 소분류는 기존의 <option> 태그가 그대로 있습니다. 

 

 이는 중분류 선택이 변경되었을 때만 소분류가 초기화되도록 작성하였기 때문입니다. 이를 해결하기 위해선 대분류가 변경되었을 때도 소분류가 초기화 되도록 코드를 추가해주어야 합니다. 중분류 <option> 태그를 출력하는 메서드(대분류가 변경되었을 때 동작)에 아래의 코드를 추가해줍니다.

 

cateSelect3.children().remove();
cateSelect3.append("<option value='none'>선택</option>");

 

그림 4-2

 

 다시 상품 등록 페이지에 접속하여 테스트해보면 모든 분류를 선택 후 대분류를 변경할 때 중분류, 소분류 또한 초기화된 것을 볼 수 있습니다.

 

그림 4-3

 

 

5. 테스트

 카테고리 리스트가 정상적으로 출력이 되는 건 이미 확인을 했습니다. 최종적으로 카테고리를 선택을 한 뒤에 상품이 등록이 되는지를 테스트해봅니다.

 

그림 5-1

 

그림 5-2

 

그림 5-3

 

 

 

REFERENCE

 

DATE

• 2020.04.01