Create Custom SharePoint Dependent Dropdowns

I had to figure out a way to get a drop-down field to filter based on the selection of a first.  I knew and researched that you can purchase a 3rd party tool to do that, but most were overkill, and very expensive.  I only needed the dependent\cascading dropdown piece, not the other bells and whistles that came with their expensive products. Especially for SharePoint online.  

Most tools or add-ons you have to 'subscribe' to and now it's a recurring expense. Nope!  Not for me... :-)

Some preliminary notes:

• This script assumes both the Parent and Child fields are "Choice" fields in SharePoint.  
• It also assumes there are only 2 related dropdowns: Department and Cost Center.
• It also assumes both fields are always shown.  This can be easily modified using jQuery to only show the child field when the parent is populated or when it is a certain value.  This could be helpful to guide users to pick the parent first before seeing the child field.  

I cannot include this part in the script because the way you show\hide fields in SharePoint Online.  You have to inspect the field using the DOM inspector and get the unique 'ct1' field ID.  

It would look something like this if it is a "Checkbox" type field.

var payroll = document.getElementById('ctl00_ctl46_g_f9bbc609_c63b_4ac2_9abf_6499c1d1112e_ff151_ctl00_ctl00_BooleanField')

Then you could just use payroll.hide() or payroll.show() to hide or show accordingly

That tangent aside, onto the real meat of this article.  

Prerequisites:

1. You have to download and reference the jQuery min script as directed in the first line.  You can download it here.  https://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/  After you download it, upload it to your SharePoint site and make sure the reference is set properly.  If not, jQuery will not load properly and you won't get the first alert (if you uncommented them for debugging).
   
   
2. Set\reset the 'parent' field throughout the script.  In the script below it's "Department"
   
   
3. Set\reset the 'child' field throughout the script.  In mine, it's called "Cost Center" but it is a required field.  If you inspect it in the DOM, it adds "Required Field" in the "Title" tag.  So, I had to use "Cost Center Required Field".  Dumb but necessary

Debugging\Troubleshooting

If the script doesn't work right away, you can uncomment the 3 "Alert" lines by removing the leading forward slashes (//) and it'll let you know where it's at in the code and might point you to what's not firing off.  

1. Alert 1 is important whenever you start a new script.  I ALWAYS use this alert after the document.ready to make sure jQuery is loaded properly.  Without this alert firing, nothing else will work.
   
   
2. Alert 2 displays the costCenters that were returned from the switch\case statement.  If you get here, you know jQuery was loaded, it recognized the department, and returned the appropriate child values.  This is before it clears existing values and tries to set the new values in the child dropdown.
   
   
3. Alert 3 will spin through each cost center as it's loaded into the child dropdown field.

The Source Code

<script src="/SiteAssets/Javascript/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
  //alert ("I Am Ready");
  $("select[title^='Department']").change(function()
  {
   SetCostCenterDropDownList();
  });
 });
 function SetCostCenterDropDownList(){
  var department =$("select[title^='Department']").val();
  //get a reference to the child drop-down to load new values below
  var costCenterSelection = $("select[title='Cost Center Required Field']");
  switch (department)
  {
   case 'Department1':
    costCenters = ['','123','456','789','012','345'];
    break;
   case 'Department2':
    costCenters = ['','987','654','321'];
    break;
   case 'Department3':
    costCenters = ['','208','582','963'];
    break;
   default:
    alert("No Associated Cost Centers");
    break
  }
 
  //alert(costCenters);
  //clear out existing options from Cost Centers drop-down
  $("select[title='Cost Center Required Field']")
  .find('option')
  .remove();
 
  //Add new cost centers to dropdown
  $.each(costCenters, function (index,value)
  {
   //alert(value);
   costCenterSelection.append('<option value="' + value + '">' + value + '</option>');
  });
 };
</script>

There you go.  A simple yet effective dependent drop-down that's free.  What I've outlined is really just the tip of the iceberg with what's possible.  Multiple dependencies, showing and hiding fields, prepopulating fields are just some of the enhancements you can add to this.  Making the form easier to fill in for users makes them happy and avoids errors which makes admins happy. 😀