select 2 - 자바스크립트로 html 생성하는 방법

센세 

센세가 가르쳐준 데이터 바인딩도 함께 응용해보고 싶다면 해보라고 한 것 해봤는데

코드리뷰 가능할까요?

HTML
    <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 none">
            <!-- 데이터바인딩 + html생성해보자 -->
        </select>
    </form>
--------------------------------
Javascript

<script>
 var select = document.querySelectorAll(".form-select");
      
      var 셔츠사이즈 = [{id : 0, size: 'S'},{id : 0, size: 'M'},{id : 0, size: 'L'}];
      var 바지사이즈 = [{id : 1, size: '26'},{id : 1, size: '28'},{id : 1, size: '30'}];
      select[0].addEventListener("input",(e)=> {
        if(select[0].value !== '모자') {
            select[1].classList.remove("none");
        }
        if(select[0].value == '셔츠') {
            let 탬플릿 = `<option>${셔츠사이즈[0].size}</option>
                          <option>${셔츠사이즈[1].size}</option>
                          <option>${셔츠사이즈[2].size}</option>`
            select[1].innerHTML = 탬플릿;
        }
        if(select[0].value == '바지') {
            let 탬플릿 = `<option>${바지사이즈[0].size}</option>
                          <option>${바지사이즈[1].size}</option>
                          <option>${바지사이즈[2].size}</option>`
                          select[1].innerHTML = 탬플릿;
        }
        
      })
</script>