자바스크립트 제이쿼리 셀렉트 박스 드롭다운 기능 (Javascript Selectbox Dropdown)

자바스크립트 (JavaScript)

 

See the Pen 자바스크립트 셀렉트박스 드롭다운 기능 (Javascript Selectbox Dropdown) by kimyangsun (@kimyangsun) on CodePen.

 

자바스크립트 제이쿼리 셀렉트 박스 드롭다운 기능 (Javascript Selectbox Dropdown) 퍼블리싱 소스입니다.

보통 셀렉트 박스를 css로만 커스텀하기에는 한계가 있습니다. 그래서 자바스크립트로 저런식으로 작업하는 경우가 많아요.

 

추가로 드롭다운 열리고 드롭다운 메뉴가 아닌 다른곳을 클릭했을때 드롭다운이 닫히는 기능도 넣어뒀습니다.

 

코드펜으로 살펴보시면 이해가 빠르게 되실거라 생각해요. :)

 

// 드롭다운 (공통)
let dropdownLabel = $('.dropdown .dropdown-label');
let optionButton = $('.dropdown .option-list .option-item a');

dropdownLabel.on('click', function(e){
  e.preventDefault();
  let dropdownBox = $(this).closest('.dropdown');
  let options = $(this).siblings('.option-list');

  if (dropdownBox.hasClass('active')) {
    options.stop().slideUp(300);
    dropdownBox.removeClass('active');
  } else {
    options.stop().slideDown(300);
    dropdownBox.addClass('active');
  }
});

// 드롭다운 - 옵션 선택 및 선택 후 옵션 숨기기
optionButton.on('click', function(e){
  let $this = $(this);
  let optionList = $this.closest('.option-list'); 
  if (!optionList.parent().hasClass('dropdown-link')) {
    e.preventDefault();
  }
  let text = $this.html();
  let selected = $this.closest('.option-list').siblings('.dropdown-label');

  selected.html(text);
  optionList.stop().slideUp(300);
  optionList.parent().removeClass('active');
})

// 드롭다운 - 드롭다운 오픈 후 다른곳 클릭시 닫히게 하기
$(document).bind('click', function(e) {
  let clickedPoint = $(e.target);
  let dropdown = clickedPoint.parents().hasClass('dropdown');
  if (!dropdown) {
    let dropdownAll = $('.dropdown');
    let optionListAll = $('.dropdown .option-list');
    optionListAll.stop().slideUp(300);
    dropdownAll.removeClass('active');
  }
});