1차 셀렉트값 변경시 2차 셀렉트값 변경

[허희주]

 <form class="container my-5 form-group">
        <p>상품선택</p>
        <select class="form-select mt-2 product-choice">
          <option value = 'hats'>모자</option>
          <option value = 'shirts'>셔츠</option>
        </select>
        <select name="" id="" class="product-detail">
        </select>
    </form>

    <script>
        let products = document.querySelector('.product-choice');
        let details = document.querySelector('.product-detail');   
        
        let detailsArr = [
            {products : '모자', option:['small', 'medium', 'large']},
            {products : '셔츠', option:[90, 95, 100, 105]}
        ];

        function choice(){
            if(products.value == 'hats'){ 
                detailsArr[0].option.forEach(function(el) { 
                    let options = document.createElement('option');                  
                    options.innerHTML = `${el}`;
                    details.append(options);
                });  

            }else if(products.value == 'shirts'){
                detailsArr[1].option.forEach(function(el) {
                    let options = document.createElement('option');
                    options.innerHTML = `${el}`;
                    details.append(options);
                });   
            }
        }

        choice();
        products.addEventListener('change', function(){
            choice();
        });
       
    </script>

1차 셀렉트 값 변경될때마다 2차 셀렉트 option값을 변경시키는 소스인데요
select 박스 값이 변경되면 option값이 누적되어 추가됩니다 
어떻게 처리해야 하나요? 

[codingapple]

선택시 select안의 html을 싹 비우고 append하라고 코드짜면 될듯요

[허희주]

 let detailsArr = [
            {prod : 'hats', option:['small', 'medium', 'large']},
            {prod : 'shirts', option:[90, 95, 100, 105]},
            {prod : 'bottom', option:[28,30,32,34,36,38]},
            {prod : 'dress', option:['white', 'pink', 'green', 'black']},
        ];

        function choice(){
            while ( details.hasChildNodes() ){
                details.removeChild( details.firstChild );       
            }
            detailsArr.forEach(function(el, i){
                if(el.prod == products.value){
                    let opt = el.option;
                    opt.forEach(function(al){
                        let options = document.createElement('option'); 
                        options.innerHTML = `${al}`;
                        details.appendChild(options);
                    });
                }
            });
        }

        choice();
        products.addEventListener('change', function(){
            choice();
        });

검색해서 지우는거 넣고 반복되는 부분이 많은것 같아 다시 수정햇습니다

[글쓴이]

글