selectbox를 JS로 컨트롤 해보기 - input, change 이벤트

selectbox를 JS로 컨트롤 해보기 - input, change 이벤트

 

 

이전 포스팅에서는 Javascript로 DOM을 조작하는데 있어, input 사용을 주로 예제로 들었습니다. 이번 포스팅에서는 input의 사촌(?) 격인 selectbox 컨트롤을 추가로 정리해보면서, 다양한 form 요소들을 사용하는 방법을 확장해 나가보기로 합니다.

 

 

selectbox의 장점

 

input은 사용자가 직접 타이핑을 해서 입력을 하기 때문에, 입력되는 데이터를 '한정'하거나 제한을 해야하는 장치들이 필요합니다. 예를 들어 대학교 이름을 입력받아야 하는 경우 사용자에 따라서 '한국대학교', '국립한국대학교', '한국대', '한대' 등으로 각양각색으로 입력을 할 수 있기 때문입니다.

 

그래서 마치 4지선답 객관식 문제처럼, 보기를 제시함으로써 사용자로부터 정확한 정보를 입력 받을 수 있도록 해주는 것이 바로 selectbox를 이용하는 이유입니다.

 

다음의 간단한 html 코드를 예제로 사용해보겠습니다.(Bootstrap을 적용한 예제입니다.)

<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 off">
      <option>95</option>
      <option>100</option>
      <option>105</option>
    </select>
  </form>
  
<style>
  .off {
    display: none;
  }
</style>

양말을 선택했을 때는 아무 변화가 없다가

티셔츠를 선택하면, 사이즈 선택을 위한 셀렉트 박스가 나타납니다.

 

쇼핑몰에서 흔히 볼 수 있는 선택박스인데요, 양말의 경우에는 size가 딱히 없고, '티셔츠'를 선택했을 때는 추가로 size를 선택하도록 하는 selectbox가 나타나도록 하는 것이 이번 예제의 목표입니다.

 

이와 같은 기능을 구현하려면, Javascript를 어떻게 코딩하면 좋을까요?

 

 

 

selectbox에서의 event

 

input 박스라면, input 이벤트와 change 이벤트를 감지해서 JS로 조작을 했었더랬습니다.

input.addEventListener("input", function(){
   실행할 코드~~
});

 

이런 식으로 말이죠. 그러면 selectbox에서 일어나는 이벤트 감지는 어떻게 할까요?

결론적으로 input 박스와 동일하다고 보면 됩니다.

 

selectbox는 생긴 모습이 input과 달라서 왠지 모르게 복잡하고 더 어려운거 아닐까?라고 생각할 수도 있겠지만 그냥 똑 같다고 보시면 됩니다. 입력한 내용만 사용자가 입력하느냐? 정해진 내용을 선택하느냐?의 차이만 존재하는 것입니다.

selectbox.addEventListener("input", function(){
   실행할 코드~~
});

 

 

selectbox와 input은 결국 같다

 

아래의 경우, '양말'이라는 값은 JS로 어떻게 가져올까요?(input이라고 생각해보세요.)

셀렉트박스는 결국 인풋과 동일하게 취급할 수 있습니다. 둘 다 입력된 값은 value로 가져옵니다.

 

input이라고 가정해본다면, 저 값은 input의 value가 될 것입니다.

selectbox의 경우에도 동일합니다. 저 값은 selectbox의 value가 됩니다.

 

따라서, 아래와 같이 그 값을 가져올 수 있습니다.

selectbox.value

 

 

자 그러면, 힌트는 모두 나왔으니 JS로 코딩을 작성해봐야겠죠?

 

 

 

구현로직 정리

 

1. 사이즈를 담고 있는 selectbox는 off 클래스를 붙여서 최초에 숨김 처리를 해둔다.
2. 제품을 담고 있는 selectbox에서, 만약 '티셔츠'를 선택한다면 사이즈 선택박스를 보여준다.
    티셔츠가 아니라면, 사이즈 selectbox는 다시 숨김처리를 한다.

 

대충 이런 식이 되겠죠? 당장 JS 코드를 작성해봅시다.

const choice = document.querySelectorAll(".form-select")[0];
const size = document.querySelectorAll(".form-select")[1];

choice.addEventListener("input", function(){
  if (choice.value == '티셔츠'){
    size.classList.remove("off");
  } else {
    size.classList.add("off");
  }
})

 

쿼리 셀렉터를 매번 날려주면 성능저하가 있으니, 변수로 만들어주었습니다.

그리고 이벤트 리스너를 달아주고, input 이벤트를 감지하도록 했습니다.(change를 사용할 수도 있겠습니다.)

 

input이나 change 이벤트를 감지하면, 조건문을 실행하고 selectbox.value가(=선택된 값이) '티셔츠'인 경우에

off 클래스를 붙여주고, else 인경우 off 클래스를 떼어주도록 했습니다.

 

말로 풀어보니 간단하죠?

티셔츠를선택한 경우 사이즈를 추가로 선택할 수 있는 기능이 완성되었습니다.

 

자, 이제 우리는 쇼핑몰의 사이즈 선택기능 따위는 후다닥 만들 수 있는 코딩 근육을 가질 수 있게 되었습니다.

당장 쇼핑몰을 만들어서 부자~ 됩시다!!

 

 

마치며

 

사실 쇼핑몰은 워낙 역사가 오래되어서, 공개되어 있는 오픈 소스도 매우 많습니다. 가져다가 잘 활용하는 방법이 훨씬 더 경제적이긴 합니다^^ 하지만, 알고 사용하는 것과 남이 만든 것을 그대로 사용하는 건 큰 차이가 있겠죠?

 

오늘도 이렇게 한 가지 익혀놓게 되었습니다. 파이팅!

 

즐거운 코딩생활, 즐코딩.

KINcoding