[Javascript] Select(콤보박스)에서 선택한 값 출력하기

화질이 안좋아서 잘 안보이지만 선택한 값을 모두 보여주는 걸 구현해보았다.

 

HTML

  <form action="#">

    <select name="apparel" id="apparel">

      <option value="">무엇을 사실건가요?</option>

      <option value="">모자</option>

      <option value="">셔츠</option>

    </select>

    <select name="hat-size" id="hat-size">

      <option value="">free</option>

    </select>

    <select name="shirts-size" id="shirts-size">

      <option value="">사이즈를 선택해주세요.</option>

      <option value="">95</option>

      <option value="">100</option>

      <option value="">105</option>

    </select>

  </form>

  <div class="result">

    <p class="apparel-name"></p>

    <p class="apparel-size"></p>

  </div>

form 태그 안에 select문 3개를 미리 담아두고 result값을 출력할 곳을 따로 만들어 두었다.

 

CSS

form{

  margin-left: 200px;

  margin-top: 200px;

}

#apparel,

#hat-size,

#shirts-size{

  font-size: 40px;

  padding: 40px;

}

#hat-size,

#shirts-size{

  visibility: hidden;

  opacity: 0;

  transition: all 0.3s;

  position: absolute;

}

.on{

  visibility: visible !important;

  opacity: 1 !important;

}

.result{

  font-size: 40px;

  margin-top: 100px;

  margin-left: 200px;

}

apparel select빼고 나머지는 안보이게 설정하고 position:absolute를 한 이유는 두 개를 겹쳐놓아서 선택되었을 때 같은 위치에 뜨게 하기 위함이다.

 

JAVASCRIPT

const apparel = document.querySelector('#apparel');

const hatSize = document.querySelector('#hat-size');

const shirtsSize = document.querySelector('#shirts-size');

const apparelName = document.querySelector('.apparel-name');

const apparelSize = document.querySelector('.apparel-size');

function reset(){

  apparelName.innerHTML = '';

  apparelSize.innerHTML = '';

}

apparel.addEventListener('input',function(){

  if(apparel.options[apparel.selectedIndex].text == '모자'){

    hatSize.classList.add('on');

    reset()

    apparelName.innerHTML = apparel.options[apparel.selectedIndex].text;

    apparelSize.innerHTML = hatSize.options[hatSize.selectedIndex].text;

  } else{

    hatSize.classList.remove('on');

  }

  if(apparel.options[apparel.selectedIndex].text == '셔츠'){

    shirtsSize.classList.add('on');

    reset();

    apparelName.innerHTML = apparel.options[apparel.selectedIndex].text;

    shirtsSize.addEventListener('input',function(){

      if(shirtsSize.options[shirtsSize.selectedIndex].text == '사이즈를 선택해주세요.'){

        apparelSize.innerHTML = '';

      } else{

        apparelSize.innerHTML = shirtsSize.options[shirtsSize.selectedIndex].text;

      }

    });

  } else{

    shirtsSize.classList.remove('on');

  }

  if(apparel.options[apparel.selectedIndex].text == '무엇을 사실건가요?'){

    reset();

  }

});

다소 좀 복잡하지만 선택자들을 변수에 담아두고 reset함수도 따로 만들어두었다.

select문도 input태그와 똑같이 input과 change를 쓸 수 있는데, 값이 변할 때 마다 실행하기 위해 input 이벤트를 썼다.

apparel의 값이 '모자','셔츠',초기값일 때의 조건문을 각각 써주었다.

조건에 부합하면 미리 만들어놓은 on 클래스를 부착하고 result 박스를 비워주고 result의 값을 넣어주는 식으로 했다.

shirtsSize는 왜 조건문 안에 이벤트리스너를 한 번 더 썼냐면 apparel에만 input 이벤트가 돌고 있기 때문에 shirtsSize의 값이 바뀌어도 result의 값이 바뀌지 않아서 이벤트리스너를 안에 한 번 더 써주었다.

 

각 경우의 수를 다 따져보면서 코드를 짜다보니 좀 지저분해진 감이 없지 않아 있다. 분명 이 코드를 깔끔하게 정리할 수 있는 방법이 있을 것이다.