STS3 쇼핑몰 프로젝트[22] 상품 정보 수정 구현(2)

상품 정보 수정에서 상품 카테고리

상품 카테고리는 '상품 조회' 페이지에서 처럼 DB에 저장된 카테고리가 출력이 되면서, '상품 등록' 페이지와 같이 대분류 선택에 따라 중분류가 초기화 및 변경되도록 해야 합니다.

따라서 '상품 조회', '상품 등록' 페이지에서의 사용한 상품 카테고리 관련 코드를 활용하여 작성했습니다.

 

먼저 DB에 저장된 카테고리가 선택된 상태로 출력시킬 코드를 추가해줍니다. 아래의 코드는 $(document). ready(function(){}) 메서드 내부에 반드시 작성해 주어야 합니다.

/* 카테고리 */
			let cateList = JSON.parse('${cateList}');
			let cate1Array = new Array();
			let cate2Array = new Array();
			
			let cate1Obj = new Object();
			let cate2Obj = new Object();
			
			let cateSelect1 = $(".cate1");		
			let cateSelect2 = $(".cate2");
			
			/* 카테고리 배열 초기화 메서드 */
			function makeCateArray(obj,array,cateList, tier){
				for(let i = 0; i < cateList.length; i++){
					if(cateList[i].tier === tier){
						obj = new Object();
						
						obj.kind_name = cateList[i].kind_name;
						obj.kind_id = cateList[i].kind_id;
						obj.cateparent = cateList[i].cateparent;
						
						array.push(obj);				
						
					}
				}
			}	
			
			/* 배열 초기화 */
			makeCateArray(cate1Obj,cate1Array,cateList,1);
			makeCateArray(cate2Obj,cate2Array,cateList,2);
			
			let targetCate1 = '';
			let targetCate2 = '${productsInfo.kind_id}';		
					
			for(let i = 0; i < cate2Array.length; i++){
				if(targetCate2 === cate2Array[i].kind_id){
					targetCate2 = cate2Array[i];
				}
			}// for
			
			for(let i = 0; i < cate2Array.length; i++){
				if(targetCate2.cateparent === cate2Array[i].cateparent){
					cateSelect2.append("<option value='"+cate2Array[i].kind_id+"'>" + cate2Array[i].kind_name + "</option>");
				}
			}		
			
			$(".cate2 option").each(function(i,obj){
				if(targetCate2.kind_id=== obj.value){
					$(obj).attr("selected", "selected");
				}
			});				
			
			for(let i = 0; i < cate1Array.length; i++){
				if(targetCate2.cateparent === cate1Array[i].kind_id){
					targetCate1 = cate1Array[i];	
				}
			}// for	
			
			
			for(let i = 0; i < cate1Array.length; i++){
				cateSelect1.append("<option value='"+cate1Array[i].kind_id+"'>" + cate1Array[i].kind_name + "</option>");
			}	
			
			$(".cate1 option").each(function(i,obj){
				if(targetCate1.cateparent === obj.value){
					$(obj).attr("selected", "selected");
				}
			});

카테고리가 정상적으로 출력되는지 확인합니다.