select 질문이요..

[오은선]

<form class="container my-5 form-group">
        <p>상품선택</p>
        <select class="form-select mt-2">
          <option>모자</option>
          <option>셔츠</option>
          <option>바지</option>
        </select>
        <select class="form-select mt-2 form-hide">
          <option>95</option>
          <option>100</option>
        </select>

    </form>

document.querySelectorAll('.form-select')[0].addEventListener('click', function(){
            var value = document.querySelectorAll('.form-select')[0].value;
            if( value == '셔츠'){                
                document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
                //여기부분이요
            } else if( value != '셔츠'){
                document.querySelectorAll('.form-select')[1].classList.add('form-hide');

            } else if( value == '바지'){
                document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
                document.querySelectorAll('.form-select')[1].innerHTML = '';
                var b = `<option>28</option>
                <option>30</option> `;
                document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', b);
            }
            
        }); 

선생님 insertAdjacentHTML 추가해서 바지 부분은 잘 나오는데
셔츠 선택을 하지 않고, 바지를 선택하면 (.form-select')[1] 나와야 하는데...
왜 안나오는지 해서요.

[오은선]

선생님 다시 수정을 해봤는데 이게 맞는지 해서요

<form class="container my-5 form-group">
        <p>상품선택</p>
        <select class="form-select mt-2">
          <option>모자</option>
          <option>셔츠</option>
          <option>바지</option>
        </select>
        <select class="form-select mt-2 form-hide">
          <option>95</option>
          <option>100</option>
        </select>

    </form>

document.querySelectorAll('.form-select')[0].addEventListener('click', function(){
            var value = document.querySelectorAll('.form-select')[0].value;
            if( value == '셔츠'){                
                document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
                            
            } if( value == '바지'){
                document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
                document.querySelectorAll('.form-select')[1].innerHTML = '';
                var b = `<option>28</option>
                <option>30</option> `;
                document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', b);
            }    //바지 말고 셔츠 고르면 다시 셔츠 나오게
            else if( value != '바지' &&  value == '셔츠'){
                document.querySelectorAll('.form-select')[1].innerHTML = '';
                var c = `<option>95</option>
                <option>100</option> `;
                document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', c);
            }

        });

[codingapple]

잘되면 잘한것입니다 
세개의 if문 전부 else if로 연결하는게 나을수도요 
마지막 if문 조건식은 value == '셔츠'만 남겨도될수도요

[글쓴이]

글