Cascading dropdown using plain JS

Auto selection of single options

by Greggg

HTML

<label>
  <input id="pb-nav-below-slideshow" type="checkbox">Show below slideshow</label>
<br>
<br>
<select id="pb-nav-position">
</select>

JavaScript

var unchecked = {
  "value": ["uncheck-1", "uncheck-2", "uncheck-3"],
  "display": ["Uncheck 1", "Uncheck 2", "Uncheck 3"]
};
var checked = {
  "value": ["check-1", "check-2", "check-3"],
  "display": ["Check 1", "Check 2", "Check 3"]
};
var checkbox = document.getElementById("pb-nav-below-slideshow");
var select = document.getElementById("pb-nav-position");

function updateSelect(arr) {
  for (var i = 0; i < arr.value.length; i++) {
    var v = arr.value[i];
    var d = arr.display[i];
    var option = document.createElement("option");
    option.setAttribute("value", v);
    var display = document.createTextNode(d);
    option.appendChild(display);
    //console.log(option);
    select.appendChild(option);
  }
};
updateSelect(unchecked);

checkbox.addEventListener('change', function(e){
	let belowSlideshow = e.target.checked;
	select.length = 0;
  belowSlideshow ? updateSelect(checked) : updateSelect(unchecked);
})