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

순서

1. 대분류 <option>

2. 중분류 <option>

3. 테스트

1. 대분류 <option>

'for'문과 Jquery의 'append'를 이용해서 <select> 태그 내부에 <option> 태그를 추가해줍니다.

<script> 태그 내부에 아래의 Javascript코드를 추가합니다.

/* 대분류 <option> 태그 */
for(let i = 0; i < cate1Array.length; i++){
	cateSelect1.append("<option value='"+cate1Array[i].kind_id+"'>" + cate1Array[i].kind_name + "</option>");
}

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

2. 중분류 <option>

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

$(cateSelect1).on("change",function(){
	
});

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

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

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

$(cateSelect1).on("change",function(){
	/* 대분류 선택 값을 가져오는 코드를 추가 */
	let selectVal1 = $(this).find("option:selected").val();	
});

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

$(cateSelect1).on("change",function(){
	/* 대분류 선택 값을 가져오는 코드를 추가 */
	let selectVal1 = $(this).find("option:selected").val();	
    
    /* 중분류 <option> 태그를 지우고 기본적인 <option> 태그를 추가하는 코드 */
	cateSelect2.children().remove();
    
    /* 대분류 선택 값과 일치하는 'cateparent'값을 가진 중분류 <option> 태그를 출력하는 코드 */
	cateSelect2.append("<option value='none'>선택</option>");
});

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

/* 중분류 <option> 태그 */
$(cateSelect1).on("change",function(){
	/* 대분류 선택 값을 가져오는 코드를 추가 */
	let selectVal1 = $(this).find("option:selected").val();	
			
	/* 중분류 <option> 태그를 지우고 기본적인 <option> 태그를 추가하는 코드 */
	cateSelect2.children().remove();
			
	/* 대분류 선택 값과 일치하는 'cateparent'값을 가진 중분류 <option> 태그를 출력하는 코드 */
	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].kind_id+"'>" + cate2Array[i].kind_name + "</option>");	
		}
	}// for	
});

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

3. 테스트

카테고리 리스트가 정상적으로 출력이 되는 건 이미 확인했습니다.

최종적으로 카테고리를 선택을 한 뒤에 상품이 등록이 되는지를 테스트해봅니다.