[JavaScript / jQuery] 인터렉티브 form 만들기

💡 실습 포인트!

• 이번에는 상품선택 폼을 만들어보았다.
• 상품 리스트로는 셔츠와 바지가 있고, 각각 클릭하면 사이즈 선택창에 해당하는 사이즈들의 리스트가 나와야한다.

---

💜 HTML

<form class="container my-5">
    <div class="form-group">

      <p>상품 선택</p>
      <select class="form-control" id="option1">
        <option>셔츠</option>
        <option>바지</option>
      </select>
      <div class="size-select">
        <p class="mt-4">사이즈 선택</p>
        <select class="form-control" id="option2">
        </select>
      </div>
      
    </div>
</form>

• JavaScript 코드를 짜는 게 목적이므로 디자인은 간단하게 Bootstrap 에서 복사-붙여넣기했다.
• 기본적으로 하드코딩을 해서 html 파일에 넣었었지만, 추후 JavaScript 로 코드를 짜면서 사이즈 선택 부분은 수정해보았다. 

---

💜 JavaScript

// * input 이벤트
// 값을 수정할 때마다 이벤트 발생

// * change 이벤트
// 요소 변경이 끝나면 이벤트 발생
// 텍스트 입력 요소의 경우 focus 를 잃으면 이벤트 발생
// select, input type=checkbox, input type=radio 인 경우 선택 값이 변경된 직후에 이벤트 발생


// * 데이터
let shirtSize = [80, 85, 90, 95, 100, 105];
let pantsSize = [24, 26, 28, 30, 32, 34, 36];

// * 초기 화면
shirtSize.forEach(size => {
    let template = `<option>${size}</option>`
    $('#option2').append(template);
})

// * 사이즈 선택 리스트 출력 기능
$('#option1').on('change', function(e){

    $('#option2').html('');

    if($('#option1').val() === "셔츠"){
        shirtSize.forEach(size => {
            let template = `<option>${size}</option>`
            $('#option2').append(template);
        })
    } else if($('#option1').val() === "바지"){
        pantsSize.forEach(size => {
            let template = `<option>${size}</option>`
            $('#option2').append(template);
        })
    }

})

• 이번 시간에 배운 이벤트로는 input 이벤트와 change 이벤트가 있다. 둘은 비슷하면서도 미묘하게 다른데
  • 먼저 input 이벤트의 경우 값을 수정할 때마다 이벤트가 발생한다.
  • 반면, change 이벤트는 텍스트 입력 요소인 경우 focus 를 잃을 때, select 태그나 input 태그 중 type 이 checkbox, radio 인 경우에 값이 변경된 직후에 발생한다.
• 먼저, 사이즈 선택 리스트에 나올 셔츠 사이즈와 바지 사이즈를 배열에 담아준다.
• 그리고 나서, id 가 option1 인 태그를 클릭했을 때 change 이벤트가 발생하게 하는데, id 가 option1 인 태그의 내용이 셔츠인 경우와 바지인 경우로 나누어서 해당하는 사이즈들을 html 형식으로 넣어준다.
• html 형식으로 넣어줄 때는 아래의 코드들이 shirtsSize 배열이든, pantsSize 배열이든 배열 요소들에 차례차례 적용되도록 forEach 문을 사용했다.
  • 이 때, template 변수를 만들어 배열에 담긴 순서대로 옵션값을 option 태그에 담아준다.
  • template 변수를 id 가 option2 인 태그에 붙여준다.
• 여기까지만 하면 값은 제대로 들어가지만 상품 선택을 바꿀 때마다 점점 늘어나는 옵션값을 보게 된다.
• 따라서, 다른 상품을 선택했을 때는 상품 목록이 새로 생성되기 전에 옵션값들이 비어있는 상태가 될 수 있도록  $('#option2').html(''); 을 넣어주었다.
• 그리고 마무리로, html 파일 내 하드코딩 내용을 지우고 초기화면에서 셔츠의 사이즈 선택 리스트가 뜰 수 있도록 JavaScript 코드를 넣어주었다.
• 함수를 만들어서 좀 더 수정하면 확장성있는 코드가 될 것 같은데 이건 좀 더 공부해보고 시도해봐야겠다. 아직 공부해야할 게 많아서 지금 당장하기엔..ㅜㅜ