Cascading DropDownList In SharePoint

We will create four lists for demonstrating cascading drop-down.
  1. Create a Country list with the following values.

     

  2. Create State list and create column Country as Lookup column in it.



  3. Create Cities list and create column State with Lookup column in it.

  4. Now create Employee list as per the following.
    • Name Single Line of Text
    • Department Choice Field
    • Country Lookup column (Lookup to Country)
    • State Lookup column (Lookup to State)
    • City   Lookup column (Lookup to Cities)

       
Edit the NewForm.aspx of Employee list and add ScriptEditor webpart and paste the below code in it.
  1. $(document).ready(function () {  
  2.     CheckDropDownValue({  
  3.         parentFormField: "Country"//Display name on form of field from parent list  
  4.         childList: "States"//List name of child list  
  5.         childLookupField: "Title"//Internal field name in Child List used in lookup  
  6.         childFormField: "State"//Display name on form of the child field  
  7.         parentFieldInChildList: "Country"//Internal field name in Child List of the parent field  
  8.         firstOptionText: "< Select a State >"  
  9.     });  
  10.     CheckDropDownValue({  
  11.         parentFormField: "State"//Display name on form of field from parent list  
  12.         childList: "Cities"//List name of child list  
  13.         childLookupField: "Title"//Internal field name in Child List used in lookup  
  14.         childFormField: "City"//Display name on form of the child field  
  15.         parentFieldInChildList: "State"//Internal field name in Child List of the parent field  
  16.         firstOptionText: "< Select a City >"  
  17.     });  
  18. });  
  19.   
  20. function CheckDropDownValue(params) {  
  21.     var parent = $("select[Title='" + params.parentFormField + "'], select[Title='" +  
  22.         params.parentFormField + " Required Field']");  
  23.   
  24.     $(parent).change(function () {  
  25.         DropDownCascade(this.value, params);  
  26.     });  
  27.     var currentParent = $(parent).val();  
  28.     if (currentParent != 0 && typeof (currentParent) !== "undefined") {  
  29.         DropDownCascade(currentParent, params);  
  30.     }  
  31. }  
  32. function DropDownCascade(parentID, params) {  
  33.     var child = $("select[Title='" + params.childFormField + "'], select[Title='" +  
  34.                 params.childFormField + " Required Field']," +  
  35.                 "select[Title='" + params.childFormField + " possible values']");  
  36.     var currentVal = params.currentValue;  
  37.     $(child).empty();  
  38.     var options = "<option value='0'>" + params.firstOptionText + "</option>";  
  39.     var call = $.ajax({  
  40.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('" + params.childList +  
  41.             "')/items?$select=Id," + params.childLookupField + "," + params.parentFieldInChildList +  
  42.             "/Id&$expand=" + params.parentFieldInChildList + "/Id&$filter=" + params.parentFieldInChildList +  
  43.             "/Id eq " + parentID + "&$orderby=" + params.childLookupField,  
  44.         type: "GET",  
  45.         dataType: "json",  
  46.         headers: {  
  47.             Accept: "application/json;odata=verbose"  
  48.         }  
  49.     });  
  50.     call.done(function (data, textStatus, jqXHR) {  
  51.         for (index in data.d.results) {  
  52.             options += "<option value='" + data.d.results[index].Id + "'>" +  
  53.                 data.d.results[index][params.childLookupField] + "</option>";  
  54.         }  
  55.         $(child).append(options);  
  56.     });  
  57.     call.fail(function (jqXHR, textStatus, errorThrown) {  
  58.         alert("Error retrieving information from list: " + params.childList + jqXHR.responseText);  
  59.         $(child).append(options);  
  60.     });  
  61. }  
Now open the NewForm.aspx for Employee List.

Check the City dropdown which depends upon the State value and State will depend upon Country value drop-down. 
Note you can achieve as many as a level of cascading for dropdown using above code. You just need to pass the value correctly for each cascading dropdown value like below.
  1. CheckDropDownValue({  
  2.         parentFormField: "Country"//Display name on form of field from parent list  
  3.         childList: "States"//List name of child list  
  4.         childLookupField: "Title"//Internal field name in Child List used in lookup  
  5.         childFormField: "State"//Display name on form of the child field  
  6.         parentFieldInChildList: "Country"//Internal field name in Child List of the parent field  
  7.         firstOptionText: "< Select a State >"  
  8.     });  
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now