yui3_cascaded_dropdowns.js

YUI().use('event', 'node', function(Y) {
  Y.on('domready', cascadeFields);

  function unhide(cl) {
    var nodes = Y.all('#mortgage_picker_form select.' + cl);
    for (var i = 0; i < nodes._nodes.length; i++) {
      nodes._nodes[i].style.display = "block";
    }
  }

  function hide(cl) {
    var nodes = Y.all('#mortgage_picker_form select.' + cl);
    for (var i = 0; i < nodes._nodes.length; i++) {
      nodes._nodes[i].style.display = "none";
    }
  }

  function cascadeFields() {
    // detect when the selected value of the key dropdown changes
    Y.on("change", show_dependants, "#product_type");
  }
  
  function show_dependants(e) {
    var chosenOption=e._event.currentTarget.value;
    if (chosenOption.value!='Please Select..') {
      // determine the 'type' of option chosen. ie mortgage, insurance or conveyancing
      var posUnderscore = chosenOption.indexOf('_');
      if (posUnderscore == -1) { // we didn't find the underscore delimiter 
         var option = chosenOption;
      } else {
         var option = chosenOption.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);
    }
  }  
});