JS - Select2:자바스크립트로 html 생성하는법

지난번에 짠 코드는 확장성이 부족하다
셔츠 사이즈를 95, 100 이라고 하드코딩해놓고 보여주기만 하기 때문!
실제 쇼핑몰이라면 셔츠 사이즈가 매일매일 바뀔 것인데 이럴 경우 서버에서 보낸 데이터 갯수에 맞게 <option> 태그를 생성해주는 것이 좋다

html 생성하는법 1

<div id="test">
  
</div>

<script>
  var a = document.createElement('p');
  a.innerHTML = '안녕';
  document.querySelector('#test').appendChild(a);
</script>

-> div 안에 안녕 이라는 p태그 생성
-document.createElement() 를 쓰면 html 자료를 하나 생성
-이걸 맘대로 조작 후 appendChild() 써서 아무데나 넣으면 html생성

html 생성하는법 2

<div id="test">
  
</div>

<script>
  var a = '<p>안녕</p>';
  document.querySelector('#test').insertAdjacentHTML('beforeend', a);
</script>

-문자자료로 html을 만든 후
-insertAdjacentHTML() 안에 넣기
-'beforeend'이라는 파라미터는 맨 밑에 추가하라는 뜻

<div id="test">
  
</div>

<script>
  var a = '<p>안녕</p>';
  $('#test').append(a);
</script>

jQ uery로는 이렇게!

Q. 안쪽에 추가하는게 아니라 아예 바꾸고 싶을 땐?

A. div찾아서 innerHTML = <p></p> 쓰기
jQuery에선 .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 form-hide"></select>
    </form>
<script>
      $(".form-select")
        .eq(0)
        .on("input", function () {
          let val = $(".form-select").eq(0).val();
          let shirts =
            "<option>90</option><option>95</option><option>100</option>";
          let pants =
            "<option>24</option><option>26</option><option>28</option>";
          if (val == "셔츠") {
            $(".form-select").eq(1).removeClass("form-hide");
            $(".form-select").eq(1).html(shirts);
          } else if (val == "모자") {
            $(".form-select").eq(1).addClass("form-hide");
          } else if (val == "바지") {
            $(".form-select").eq(1).removeClass("form-hide");
            $(".form-select").eq(1).html(pants);
          }
        });
</script>

1. 두번째 <select> 보여주세요
2. 두번째 <select> 안을 만든 html로 바꿔주세요

다른방법

<script>
  $('.form-select').eq(0).on('input', function(){

    var value = $('.form-select').eq(0).val();
    if (value == '셔츠') {
      $('.form-select').eq(1).removeClass('form-hide');
    }
    else if (value == '바지'){
      $('.form-select').eq(1).removeClass('form-hide');
      $('.form-select').eq(1).html('');
      var 템플릿 = `<option>28</option><option>30</option>`;
      $('.form-select').eq(1).append(템플릿)
    }

  });
</script>

1. 두번째 <select> 보여주세요
2. 두번째 <select> 안을 비워주세요
3. html 만들어서 두번째 <select>안에 append 해주세요

(응용) 바지 눌렀다가 다시 셔츠를 누르면 돌아가지 않는 문제 해결해보기 - 완료-