셔츠 사이즈 선택하는 옵션만들기 (select input 다루기)

<script>

 //사용자가 선택한 것이 셔츠라면, 클래스form-hide 지우기
 document.querySelectorAll('.form-select')[0].addEventListener('input',function(){
  var 유저선택 = document.querySelectorAll('.form-select')[0].value;
  if(유저선택 === '셔츠'){
  document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
 }
 });
 
 </script>

원래는 셔츠와 모자가 있는데, 그중 셔츠를 선택하면 사이즈 옵션이 나오도록 만들거임.

 

부트스트랩은 기본 설치래

0. 먼저 html, css를 만들어둔다

1. 셔츠를 선택하면 사이즈 옵션이 뜨도록 만든다 (반대로, 미리 form-hide 클래스를 부착해둔뒤, 클릭하면 떼버리는 형식으로 만들기)

 

<style>
      .form-hide{
        display: none;
      }
</style>
    

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

 

 

하지만, 이런식으로 미리 html, css를 만들어놓으면
확장성이 부족하다.

실제 쇼핑몰에서는 재고가 사이즈별, 상품별 다르게 들어오는데, 날마다 html 코드를 수정하는 것은 불가능.

따라서, 자바스크립트를 이용하여 html 코드를 만들어보겠다~~ 다음게시물 클릭해주새여