[코딩애플;JS]select 인풋 다루기(셀렉박스에서 옵션값 변경 시 이벤트, onchange)

💡<select>태그도 input,change 이벤트가 발생함.

💡.value로 유저가 입력한(선택한)값을 가져올 수 있다.

 

select박스에서 셔츠를 고르면 사이즈 선택하는 select박스 나오도록 만들어보기.

모자 선택 시 사이즈 셀렉 박스는 사라지게 해야함.

 

 

💡 onchange/chnage 이벤트

:check박스나 radio버튼 체크 상태 변경 시 onchange이벤트 발생.(모든 브라우저 지원)

:input과 다른 점은 - input은 요소값 변경 직후에 발생하고, select태그에선 작동 안함.

                              - 요소 값 변경 후 요소가 포커스를 잃으면 발생하고 select태그 안에서 작동 함. 

1️⃣onchange를 이용해서 만들어보기

  <form class="container my-5 form-group">

    <p>상품선택</p>

    <select class="form-select mt-2" onchange="changeSelect()">

      <option value="hat">모자</option>

      <option value="shirts">셔츠</option>

    </select>

    <select class="form-select mt-5">

      <option>사이즈1</option>

      <option>사이즈2</option>

    </select>

  </form>

  function changeSelect(){

    var shirts = document.querySelector('.mt-2');

  var shirtsValue = shirts.value;

  if(shirtsValue == 'shirts'){

     document.querySelector('.mt-5').classList.add('on')

    }else{

        document.querySelector('.mt-5').classList.remove('on')

    }

  }

 

 

2️⃣change를 이용해서 만들어보기(+e.currnetTarget) :JS로만 제어하고 싶다면!

  <form class="container my-5 form-group">

    <p>상품선택</p>

    <select class="form-select mt-2">

      <option value="hat">모자</option>

      <option value="shirts">셔츠</option>

    </select>

    <select class="form-select mt-5">

      <option>사이즈1</option>

      <option>사이즈2</option>

    </select>

  </form>

var shirts = document.querySelector('.mt-2');

shirts.addEventListener('change',function(e){

    if(e.currentTarget.value == 'shirts'){

        document.querySelector('.mt-5').classList.add('on')

      }else{

             document.querySelector('.mt-5').classList.remove('on')

         }

})