17. [jQuery] Interactive Form - 하드코딩 ver.

이번 포스팅에서는 사용자가 주어진 Select 중에서 어떤 선택지를 눌렀을 때, 해당 option 에 대한 다른 Select 가 띄워지는 일종의 Animation? UI를 구현해 보도록 하겠습니다. 

 

HTML

    <form class="container my-5">
        <div class="form-group">
            <p>상품선택</p>
            <select class="form-control" id="option1">
                <option>모자</option>
                <option>셔츠</option>
                <option>바지</option>
            </select>

            <div class='size-wrap'>
                <p class='mt-5'>사이즈</p>
                <select class="form-control" id='option2'>
                    <!--JS를 통해서 사이즈를 품목에 따라 append 할 영역-->
                </select>
            </div>
        </div>
    </form>

해당 코드는 Select와 Option 으로 구성되어 있습니다. 현재 상품선택 아래에 size-wrap 으로 구성되어 있는 div 영역은 

CSS 상에서 숨김 처리 했습니다. 만약 사용자가 상품 품목을 선택하였다면 그 품목에 해당하는 Size를 띄워줘야 하기 때문입니다. 

 

CSS

.size-wrap{
    display : none;
}

 

JQuery

하지만 아래 코드는 Option들을 하드 코딩해야 하는 단점이 존재합니다. 

 

▷ User 가 선택하는 값에 따라 다양한 조건문들을 생성하고 그 상품에 해당하는 사이즈 선택지들을 직접 HTML 로 작성하여 append() 해준다. 

 $('#option1').on('change', function() {
            if ($('#option1').val() == '셔츠') {
                $('#option2').html(' '); // 다른 선택지를 선택했을 때 기존에 있던 선택지를 비워주는 코드
                var sizeTemplate = `
                    <option>95</option>
                    <option>100</option>
                    <option>105</option>
                    <option>110</option>
                `;
                $('.size-wrap').show();
                $('#option2').append(sizeTemplate);
            } else if ($('#option1').val() == '바지') {
                $('#option2').html(' ');
                var sizeTemplate = `
                    <option>28</option>
                    <option>30</option>
                    <option>32</option>
                `;
                $('.size-wrap').show();
                $('#option2').append(sizeTemplate);
            }
            else{
                $('.size-wrap').hide();
            }
        });

 

input, change 이벤트 

 

 

 $('#option1').on('change', function() {

  });

 

<input> 태그에서는 input 이벤트와 change 이벤트가 각기 다른 동작을 취합니다. 

▷ input : input 창에서 사용자가 타이핑을 하는 내내 이벤트를 발생한 것으로 인식한다. 

▷ change : input 창에서 사용자가 타이핑을 한 후, 커서를 다른 곳으로 찍을 때 이벤트를 발생한 것으로 인식한다. 

 

<select> 태그에서는 input 이벤트와 chage 이벤트가 비슷한 동작을 취합니다. 

▷ input & change : select 창에서 사용자가 여러 선택지 중에서 하나의 선택지를 선택했을 때 이벤트가 발생한 것으로 인식한다. 

 

 

JQuery를 활용하여 동적으로 HTML 생성하기

 

 

▷ 변수에 HTML 코드를 담아서 추가를 원하는 대상에 append를 해주면 됩니다. 
▷ `(백틱)을 활용하면 기존의 ' ' 내부에 Enter를 적용하면 깨지는 현상을 방지 할 수 있습니다.  

var template = `
	<p>Hi</p>
`;

$('추가하고 싶은 곳').append(template);