dependent selects example

by lmk123

HTML

<script src="https://unpkg.com/dependent-selects@0.1.0"></script>
<div id="selects"></div>
<div>
  Max level:
  <input id="maxLevel" type="number" min="1">
</div>
<div>
  <button id="set">Set value to ['c', 'b']</button>
  <button id="reset">Reset</button>
</div>
<div>
  Selected:
  <pre id="selected"></pre>
</div>

JavaScript

var maxLevel = 3
$('maxLevel').value = maxLevel

var multi = new DependentSelects(function(index) {
  if (index >= maxLevel) return
  return new Promise(function(reslove) {
    setTimeout(function() {
      reslove([{
        label: 'label a',
        value: 'value a'
      }, {
        label: 'label b',
        value: 'value b'
      }, {
        label: 'label c',
        value: 'value c'
      }])
    }, Math.random() * 500)
  })
})

multi.on('add', function(list, index, multi) {
  var select = document.createElement('select')

  var empty = document.createElement('option')
  empty.textContent = 'select one'
  empty.value = ''
  select.appendChild(empty)

  list.forEach(function(item) {
    var option = document.createElement('option')
    option.textContent = item.label
    option.value = item.value
    select.appendChild(option)
  })

  select.value = ''
  $('selects').appendChild(select)
})

multi.on('set', function(item, index) {
  $('selects').children[index].value = item ? item.value : ''
})

multi.on('cut-off', function(length, multi) {
  var deletedSelects = [].slice.call($('selects').children, $('selects').children.length - length)
  deletedSelects.forEach(function(select) {
    $('selects').removeChild(select)
  })
})

multi.on('change', function() {
  $('selected').textContent = JSON.stringify(multi.selected, null, 2)
})

$('selects').addEventListener('change', function(e) {
  var select = e.target
  var index = Array.prototype.indexOf.call($('selects').children, select)
  var item
  if (select.value) {
    item = multi.lists[index].find(function(v, i) {
      return v.value === select.value
    })
  } else {
    item = null
  }
  multi.set(index, item, true)
})

$('maxLevel').addEventListener('change', function() {
  var level = parseInt($('maxLevel').value, 10)
  if (isNaN(level) || level <= 0) {
    $('maxLevel').value = maxLevel
  } else {
    maxLevel = level
    multi.reset()
  }
})

$('set').addEventListener('click', function() {
 ...