[javaScript] select box 여러개 만들기 (data set 사용)

자바스크립트로 셀렉트박스 만들기

여러개 만들어 공통 소스 사용하고 클래스와 data 값으로 구분

 

<!-- s: select box -->
  <div class="ui_select_box">
    <button class="label">ㅇㅇㅇ님</button>
    <ul class="select_list">
      <li><button type="button" class="select_item">select1</button></li>
      <li><button type="button" class="select_item">select2</button></li>
    </ul>
  </div>
  <!-- // e: select box -->

  <!-- s: select box type2 -->
  <div class="ui_select_box type2">
    <button class="label">Default</button>
    <ul id="optionSelect" class="select_list">
      <li><button type="button" class="select_item" data-class="select_code_A">selectA</button></li>
      <li><button type="button" class="select_item" data-class="select_code_B">selectB</button></li>
      <li><button type="button" class="select_item" data-class="select_code_C">selectC</button></li>
    </ul>
  </div>
  <!-- // e: select box type2 -->

 

let orderBrand = null;

function initSelectLabel(){
  const label = document.querySelectorAll('.label');

  label.forEach(function(e){
    lb.addEventListener('click', e => {
      let selectList = lb.nextElementSibling;
      let selectItems = selectList.querySelectorAll('.select_list button');

      clickLabel(lb, selectItems);
    })
  });

  const clickLabel = (lb, selectItems) => {
    const selectBox = lb.closest('.ui_select_box');

    if(lb.parentNode.classList.contains('active')) {
      lb.parentNode.classList.remove('active');

      selectItems.forEach((opt) => {
        opt.removeEventListener('click', () => handleSelect(lb, opt));
      });
    } else {
      lb.parentNode.classList.add('active');
      selectItems.forEach((opt) => {
        opt.addEventListener('click', () => {
          // select box에서 선택한 항목만 체크 표시
          const buttonsInSameBox = selectBox.querySelectorAll('.select_list button');
          buttonsInSameBox.forEach((btn) => btn.classList.remove('select'));

          opt.classList.add('select');

          // value 속성이 있으면 type2 선택 select box → 선택한 type2 코드를 세팅
          if($(opt).attr('value') !== undefined){
            orderBrand = $(opt).attr('value');
          }

          handleSelect(lb, opt)
        })
      })
    }
  }

  const handleSelect = (label, item) => {
    if(label.parentNode.classList.contains('type2')){
      label.innerHTML = item.textContent;
    }
    label.parentNode.classList.remove('active');
  }
}