카테고리 셀렉트박스를 동적으로 생성하고 삭제하기

카테고리 선택 등록을 위해 셀렉트박스를 이용하는 경우, 셀렉트박스를 매번 만들어 주고 삭제해야 하는 경우가 있다. 이때 셀렉트박스를 동적으로 처리하도록 하는 스크립트이다.
하위 레벨에 내용이 존재하면 계속해서 추가로 셀렉트박스를 생성한다. 하위 카테고리를 모두 펼친 상태에서 다시 상위를 선택하면 하위 카테고리를 자동으로 삭제한다.

데이터는 ajax를 통하여 json 형식으로 받아오면 된다. 해당 부분은 구현하지 않았다.

스크립트의 작동 모습이 궁금하면, 미리 보기를 통해 확인 가능하다.

Javascript

function selectCategory(obj) {
  var ag_idx = obj.value
  var ag_depth = obj.getAttribute('depth')

  var felm = getObjectFormAuthGroup()
  for (var i = 0; i < felm.ag_parent.length; i++) {
    if (ag_depth < felm.ag_parent[i].getAttribute('depth')) {
      felm.ag_parent[i].remove()
    } else {
      if (ag_idx) felm.ag_parent[i].disabled = true
    }
  }

  if (ag_idx) {
    ag_depth++
    getAuthGroupChildren(ag_idx, ag_depth)
  }
}

function getAuthGroupChildren(ag_idx, ag_depth) {
  //ajax를 통하여 json 형태의 데이터를 가져오는 부분을 만들어 추가 합니다.
  var response = {
    1: {
      5: 'Category1-1',
      6: 'Category1-2',
    },
    2: {
      7: 'Category2-1',
      8: 'Category2-2',
      9: 'Category2-3',
    },
    3: {
      10: 'Category3-1',
      11: 'Category3-2',
    },
    4: {
      12: 'Category4-1',
    },
    5: {
      13: 'Category1-1-1',
      14: 'Category1-1-2',
    },
    6: {
      15: 'Category1-2-1',
      16: 'Category1-2-2',
    },
    13: {
      17: 'Category1-1-1-1',
      18: 'Category1-1-1-2',
    },
  }

  var felm = getObjectFormAuthGroup()
  for (var i = 0; i < felm.ag_parent.length; i++) {
    felm.ag_parent[i].disabled = false
  }

  console.log(response[ag_idx])
  if (typeof response[ag_idx] == 'undefined') return

  var selectbox = document.createElement('select')
  selectbox.name = 'ag_parent[]'
  selectbox.setAttribute('depth', ag_depth)
  selectbox.onchange = function () {
    selectCategory(this)
  }

  selectbox.options.length = 0
  selectbox.options[0] = new Option('Category', '')

  var lists = response[ag_idx]
  for (var key in lists) {
    var val = lists[key]
    selectbox.options[selectbox.options.length] = new Option(val, key)
  }

  var div_category = document.getElementById('div_category')
  div_category.appendChild(selectbox)
}

function getObjectFormAuthGroup() {
  var f = document.frmCategoryTest
  var obj = {}

  for (var i = 0; i < f.elements.length; i++) {
    var type = f.elements[i].type
    var elName = f.elements[i].name

    if (/(text|textarea|select|hidden)/.test(type)) {
      if (/(\[|\])/g.test(elName)) {
        elName = elName.replace(/(\[|\])/g, '')
        if (typeof obj[elName] == 'undefined') {
          obj[elName] = []
        }
        obj[elName].push(f.elements[i])
      } else {
        obj[elName] = f.elements[i]
      }
    }
  }
  return obj
}

HTML

<form name="frmCategoryTest">
  <div id="div_category">
    <select name="ag_parent[]" depth="0" onchange="selectCategory(this);">
      <option value="">Category</option>
      <option value="1">Category1</option>
      <option value="2">Category2</option>
      <option value="3">Category3</option>
      <option value="4">Category4</option>
    </select>
  </div>
</form>