자바스크립트로 html 생성부분 질문있습니다.

[성경환]

바지를 선택했을때 28,30 이 뜨고 다시 셔츠를 선택했을때 95, 100, 105가 뜨도록 만들려고 했는데

사이즈가 28,30에서 -> 100,105가 되는건 만들었는데 바지 선택했을때 

없앴던 html요소가 복구가 되지 않습니다.

      let opt = document.querySelector('.size1');
      let opt1 = document.querySelector('.size2');
      let opt2 = document.querySelector('.size3');

      sel1.addEventListener('click', (event) => {
        if (event.target.value === jean) {
          sel2.classList.remove('plus');
          event.stopPropagation(); // 상위 이벤트에 영향을 줘서 그렇게 되는줄 알고 넣어줘도 안되네요
          opt.remove();
          opt1.innerHTML = '28';
          opt2.innerHTML = '30';
        } else if (event.target.value === shirts) {
          sel2.classList.remove('plus');
          opt.innerHTML = '95';
          opt1.innerHTML = '100';
          opt2.innerHTML = '105';
        } else if (event.target.value === cap) {
          sel2.classList.add('plus');
        }

[codingapple]

html을 없앴으면 다시 생성하라고 코드짜거나 그래야합니다 
숨겼다 보여주는 식으로 하면 편리합니다

[성경환]

    <form class="container my-5 form-group">
      <p>상품선택</p>
      <select class="form-select mt-2" id="select1">
        <option class="cap">모자</option>
        <option class="shirts">티셔츠</option>
        <option class="jean">바지</option>
      </select>
      <select class="form-select mt-2 plus" id="select2">
        <!-- <option class="size1">95</option>
        <option class="size2">100</option>
        <option class="size3">105</option> -->  // 이부분을 주석처리하고 
      </select>
      <select class="form-select mt-2 plus" id="select3"></select> // 새로운 select창을 만들고
    </form>

    <script>
      var products = [
        { id: 0, price: 70000, title: 'Blossom Dress' },
        { id: 1, price: 50000, title: 'Springfield Shirt' },
        { id: 2, price: 60000, title: 'Black Monastery' },
      ];

      // select 선택자.

      let cap = document.querySelector('.cap').value;
      let shirt = document.querySelector('.shirts').value;
      let jean = document.querySelector('.jean').value;

      const sel1 = document.querySelector('#select1');
      const sel2 = document.querySelector('#select2');
      const sel3 = document.querySelector('#select3');
      console.log(sel2);

      sel1.addEventListener('change', (event) => {
        console.log(event.currentTarget.value);
        if (event.currentTarget.value === shirt) {
          sel2.classList.remove('plus');
          sel3.classList.add('plus');
          shirts.forEach((value) => {
            let temp = document.createElement('option');
            temp.innerHTML = value;
            sel2.append(temp);
          });
        } else if (event.currentTarget.value === jean) {
          sel2.classList.add('plus');
          sel3.classList.remove('plus');
          for (let i = 0; i < pants.length; i++) {
            let templ = document.createElement('option');
            templ.innerHTML = pants[i];
            sel3.append(templ);
          }
        } else {
          sel2.classList.add('plus');
          sel3.classList.add('plus');
        }
      });

      var pants = [28, 30, 32];
      var shirts = [95, 100, 105, 110, 115];

알려주신대로 html을 숨겼다 보여주는식으로 만들었더니 제대로 동작은 하는데



 다른 문제가 생겼습니다.

티셔츠 클릭했을때와 바지를 클릭했을떄 서로 다른 select창은 나오는데 

셔츠 -> 바지 -> 셔츠 이런식으로 다른 태그를 클릭했다가 돌아오면 

값이 중복으로 출력이됩니다.

예전에 다른걸 할때도 이런문제가 생겨서 포기했었는데 이번에도 

모르겠어서 remove return prevent 다 사용해봐도 

도저히 모르겠습니다.

[codingapple]

바지나 티셔츠 누르면 html 생성해주세요라는 코드밖에 없어서 그런듯요 
html 생성전에 기존 옵션들은 제거도 합시다

[성경환]

let cap = document.querySelector('.cap').value;
      let shirt = document.querySelector('.shirts').value;
      let jean = document.querySelector('.jean').value;
      const sel1 = document.querySelector('#select1');
      const sel2 = document.querySelector('#select2');
      const sel3 = document.querySelector('#select3');
      console.log(sel2);
      sel1.addEventListener('change', (event) => {
        console.log(event.currentTarget.value);
        if (event.currentTarget.value === shirt) {
          sel2.classList.remove('plus');
          sel3.classList.add('plus');
          shirts.forEach((value) => {
            let temp = document.createElement('option');
            temp.innerHTML = value;
            sel2.append(temp);
          });
        } else if (event.currentTarget.value === jean) {
          sel2.classList.add('plus');
          sel3.classList.remove('plus');
          for (let i = 0; i < pants.length; i++) {
            let templ = document.createElement('option');
            templ.innerHTML = pants[i];
            sel3.append(templ);
          }
        } else {
          sel2.classList.add('plus');
          sel3.classList.add('plus');
        }
      });
      var pants = [28, 30, 32];
      var shirts = [95, 100, 105, 110, 115];


이 코드에서 
            let templ = document.createElement('option');
            templ.innerHTML = pants[i];
            sel3.append(templ);
다른 위치 (첫번째 if문이나 마지막 if문) 클릭했을때 위 세줄의 값을 다양하게 바꿔주면서 

해봤는데 계속 값이 초기화되지 않습니다. sel3.value = '' 도 해봤고 

templ.innerHTML = ''해도 값이 초기화 되지 않고, 혹은 value.length = 0으로 해도 값이 중복되고 


sel3.remove() 했을경우 아예 사라져서 다시 나타나지 않고 찾아도 도저히 모르겠습니다...

[codingapple]

templ 이건 임시변수같은데 초기화해봤자 별거없을거같군요 
select태그 찾아서 .innerHTML = '' 하면 비워집니다 

[성경환]

아 감사합니다 드디어 해결했어요

[글쓴이]

글