[JS] - 동적으로 생성해야 하는 경우 -상품관리 등록 (셀렉트 박스 내용 넣기)

이번에는 상품관리 페이지를 구현하던중 코드를 어떻게 구성할지 고민을 많이 했다

 

 

 

등록할때는 아래와 같은 형식으로 작성하면 된다

여기서 핵심 로직구성은 이렇다

0 

  0

  1

  2

  4 (3번이 생성되었다 삭제 되었다 다시 만든경우)

2 (상품박스를 중간에 삭제한 경우)

  0

3

  1

  3

 

 

이런식으로 셀렉트 박스가 구성되었다고 한다면 0번째 상품에 0 1 2 4 의 선택 할 수 있는 옵션이있고

예를들어 0번째 상품(카메라) 0 1 2 4 의 옵션 (각 다른 카메라 모델) 이런식으로 구성할 수 있다

 

여기서 데이터를 저장할때 일관성있게 저장하고 싶을때 어떻게 해야할까

이미 셀렉트 박스의 일관성은 무너졌고 셀렉트박스 안에 소속된 옵션의 순서도 순차적이다 라는 조건이 무너졌다

 

삭제가 일어날때마다 변수의 카운트를 줄여서 해결한다 -> 이방법은 사용할 수 없다

예를들어 01234 까지 생성하고 4번을 삭제하고 다시 생성해서 사용하면 카운트를 줄이고 늘리는 방식으로 해결이 가능하다. 하지만 3번을 지웠다면 예외처리를 한다하더라도 순차적이지 않다 

 

그래서 이렇게 접근했다 0 2 3 번이 생성되었고 여기 번호에 접근해야한다는것을 알리는 정보를 담은 input name="arrVal[]" 의 정보와 0번째에 접근해서 값을 받으면 0 1 2 4 번이 데이터를 보냈다는 정보를 앞과 같이 보냈다

이렇게 하면 foreach 문을 돌며 데이터의 순번과 접근해야하는 데이터 정보까지 얻을 수 있다

 

 

 

 

 

 

<div class="" name="saleOptionBox" id="saleOptionBox"  style="background-color: lightsteelblue; height: auto; padding: 20px; margin: 50px 0; border-radius: 20px;">
</div>
<div class="" style="display: flex;">
	<button type="button" class="btn btn-default optionAdd" id="optionAdd" >큰박스 추가</button>
</div>

 

<script>
		optionAdd();
        optionValAdd("saleOptionBox"+(contOp-1), contOp-1)
        
        $('body').on('click', '.optionAdd', function(e) {
            optionAdd();
            optionValAdd("saleOptionBox"+(contOp-1), contOp-1)
        });

<!-- 큰박스 추가 함수 -->
    let contOp = 0;
    function optionAdd() {
		let htmlTag = "";
        htmlTag += `<button type="button" class="btn btn-default" onclick='optionValAdd("saleOptionBox${contOp}", ${contOp})'>작은박스 추가</button>`;
   		contOp++;
        $('#saleOptionBox').append(htmlTag);
    }

    let contOpVal = 0;
    function optionValAdd(addTargetId, optionI) {
    	let htmlTag = "";
		contOpVal++;
        $(`#${addTargetId}`).append(htmlTag);
    }
    
    
</script>