Sharepoint Cascading Dropdowns with jQuery

To cascade columns, make sure that the columns are not required!  The relationship list is the list that is one level above the current list.  GT columns are the actual field names whereas the non-GT columns are actually the display names on the form.  Enjoy!

//code.jquery.com/jquery-1.11.3.min.js
//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js


var myJQ = jQuery.noConflict(true);
myJQ(document).ready(function(){
 // you would put your cascading dropdowns in here, like:
 myJQ().SPServices.SPCascadeDropdowns({
 relationshipList:"Subcategories",
 relationshipListParentColumn:"GTCategory",
 relationshipListChildColumn:"GTSubcategory",
 parentColumn:"Category",
 childColumn:"Subcategory",
 debug:true
 });
});

Advertisements

SharePoint Show/Hide Form Fields Dynamically with jQuery

When you click Category, do you want to show other column fields based on the Category selection?  Please note that the code uses all ‘display names’ and not the actual column names found in the URL.  Also, you will need to use the DOM explorer to find the JS value assigned to the code.  See “3” in the “select[title=’Category’]).val() == “3”.

Code Snippet Below:

https://mydnb.sharepoint.com/sites/intranet/globaltravel/SiteAssets/jquery-1.11.3.min.js
 
  // Execute the following JavaScript after the page has fully loaded, when it's ".ready"
  $(document).ready(function(){
    
  //Show/hide columns based on Drop Down Selection 
  $("select[title='Category']").change(function() {
  if ($("select[title='Category']").val() == "3") 
  {
  $('nobr:contains("Policy Category")').closest('tr').show();
  $('nobr:contains("Subcategory")').closest('tr').hide();
  } 
  else 
  {
  $('nobr:contains("Policy Category")').closest('tr').hide();
  $('nobr:contains("Subcategory")').closest('tr').show();
  }
  });
  });