cascaded_dropdown.js

if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", cascadeFields, false);
}
 
document.getElementsByClassName = function(cl) {
  var retnode = [];
  var myclass = new RegExp('\\b'+cl+'\\b');
  var elem = this.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i++) {
    var classes = elem[i].className;
    if (myclass.test(classes)) retnode.push(elem[i]);
  }
  return retnode;
}
 
function unhide(cl) {
  var elements = [];
  elements = document.getElementsByClassName(cl);
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "block";
  }
}
 
function hide(cl) {
  var elements = [];
  elements = document.getElementsByClassName(cl);
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "none";
  }
}
 
function cascadeFields() {
  // find the product_type dropdown select field  
  var product_type = document.getElementById('product_type');
  // detect when the selected value changes
  product_type.onchange=function(){ //run some code when "onchange" event fires
    var chosenOption=this.options[this.selectedIndex] //this refers to "product_type"
    if (chosenOption.value!='Please Select..'){
      // determine the 'type' of option chosen. ie mortgage, insurance or conveyancing
      var posUnderscore = chosenOption.value.indexOf('_');
      if (posUnderscore == -1) { // we didn't find the underscore delimiter 
        var option = chosenOption.value;
      } else {
         var option = chosenOption.value.substring(0,posUnderscore);
      }
     switch(option) {
        case 'mortgage':
          hide('protection');
          hide('conveyancing');
          break;
        case 'protection':
          hide('mortgage');
          hide('conveyancing');
          break;                  
        case 'conveyancing':
          hide('mortgage');         
          hide('protection');
          break;        
      }     
      unhide(option);
    }
  }
}