Select 2 : 자바스크립트로 html 생성하는 법 질문입니다

[빡대가리1]

저는 일단 제이쿼리가 아닌 자바스크립트언어로 바꾸어서 선생님꺼 따라쳐봤는데요,

섹션3 변수가 나오지 않습니다. 그리고 그 전에 알려주신 이벤트 버블링도 잘 안먹히는것 같습니다. 뭐가 문제일까요?

[빡대가리1]

위에 잘못 적은 부분이 있어 덧글에 js스크립트 올립니다.

 

//Select 인풋 다루기

var formSelect = document.querySelectorAll('.form-select');

formSelect[0].addEventListener('input', function(e){

  var formValue = this.value;

  if(formValue == '셔츠'){
    formSelect[1].classList.remove('form-hide');
  }else if(formValue == '바지'){
    formSelect[1].classList.remove('form-hide');

    //바지부분 응용해서 짜기
    var 섹션3 = '<option>26</option><option>27</option><option>28</option><option>29</option><option>30</option>'
    formSelect[1].appendChild(섹션3);
  }

});

[codingapple]

문자로만든 html 집어넣을땐 appendChild 말고 insertAdjacentHTML 써야합니다 

[빡대가리1]

선생님 되었습니다 감사합니다!

그런데 바지를 선택 후 셔츠를 선택했을때 바지옵션(26~30)이 안없어지고 , 

셔츠, 바지가 아닌 모자 영역을 선택했을때도 옵션자체가 지워지지 않습니다.

이벤트 버블링을 썼는데도 안없어지는데, 이벤트 버블링이 안먹히는걸까요?

 

 

~html~

  <!-- Select 인풋 다루기 -->
  <form class="container my-5 form-group">
    <p>상품선택</p>
    <select class="form-select mt-2">
      <option>상품을 선택하세요</option>
      <option>모자</option>
      <option>셔츠</option>
      <option>바지</option>
    </select>

    <!-- 셔츠 2차옵션 -->
    <select class="form-select mt-2 form-hide">
      <option>90</option>
      <option>95</option>
      <option>100</option>
    </select>
  </form>

 

~자바스크립트~

var formSelect = document.querySelectorAll('.form-select');

formSelect[0].addEventListener('input', function(e){

  var formValue = this.value;

  if(formValue == '셔츠'){
    formSelect[1].classList.remove('form-hide');
  }else if(formValue == '바지'){
    formSelect[1].classList.remove('form-hide');
    formSelect[1].innerHTML='';
    var 섹션3 = '<option>26</option><option>27</option><option>28</option><option>29</option><option>30</option>'
    formSelect[1].insertAdjacentHTML('beforeEnd', 섹션3);
  }

});

[codingapple]

모자 선택하면 option 태그들 지우라고 코드를 안짠 것일 뿐이 아닐까요 

[글쓴이]

글