<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">
            <option>95</option>
            <option>100</option>
        </select>
    </form>

• 상품을 셔츠를 선택하면 숫자 select가 나오도록 해보자.

    <script>
        $('.form-select').eq(0).on('input', function(e) {
            var value = this.value;
            console.log(value)
            if (value == "셔츠") {
                $('.form-select').eq(1).removeClass("form-hide");
            }
        });
    </script>

JS로 html 생성 방법

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

    <script>
        $('.form-select').eq(0).on('input', function(e) {
            var value = this.value;
            console.log(value)
            if (value == "셔츠") {
                $('.form-select').eq(1).removeClass("form-hide");
            }
        });

        var template = '<p>Test</p>';
        document.querySelector('#test').insertAdjacentHTML('beforeend', template);
    </script>

• insertAdjancentHTML(삽입 위치, template)
  • 추가해주는 기능이므로 반복 실행하면 여러개 생기는 것이다.
• $('#test').append(template); 로 사용 해도된다.

• 바지를 선택하면 20, 30으로 값을 바꿔보자.

    <script>
        $('.form-select').eq(0).on('input', function(e) {
            var value = this.value;
            console.log(value)
            if (value == "셔츠") {
                $('.form-select').eq(1).removeClass("form-hide");
            } else if (value == "바지") {
                $('.form-select').eq(1).removeClass("form-hide");

                var template = `<option>20</option>
                                <option>30</option>`;
                $('.form-select').eq(1).html(template)
            }
        });
    </script>

• 이런 방법도 있는데, 바지사이즈가 맨날 맨날 바뀌면 ..? 헬이다.

    <script>
        var pants = [28, 30, 32, 34];

        $('.form-select').eq(0).on('input', function(e) {
            var value = this.value;
            console.log(value)
            if (value == "셔츠") {
                $('.form-select').eq(1).removeClass("form-hide");
            } else if (value == "바지") {
                $('.form-select').eq(1).removeClass("form-hide");
                pants.forEach(function(a, i) {
                    $('.form-select').eq(1).append(`<option>${a}</option>`);
                })
            }
        });
    </script>

• forEach는 for문 보다는 성능이 좋지는 않다.
• 하지만, callback을 정의할 때 파라미터가 a: 해당 array의 element, i : index를 쉽게 꺼낼 수 있다.

for - in

• 코드 반복
• array, object 데이터 전부 꺼낼 때

for (var key in obj) {
          console.log(obj[key]);
        }

arrow function

pants.forEach((a) => { });

• function(a) { }; 와 비슷
• {} scope 안에 this의 의미가 달라질 수 있다.
  • function : this가 알맞게 정의를 해준다. (e.currentTarget 등)
  • arrow function : 이상한 녀석이 this가 될 수 있다.