Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

In this article, you will learn about three level cascading dropdown SharePoint list by using JavaScript and script editor web part.

Problem Statement

 
Create a SharePoint dropdown list to request asset,
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part
 
Output will look like this,
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part 
 

Solution

 
We need to create four SharePoint lists as shown the table below the problem statement.
 

List 1: RequestType

 
The list contains type of requirement (Hardware/Software)
  1. Create SharePoint List named “RequestType”

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part
Add the following data in title column,
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

List 2: RequestAsset

 
The list contains sub type of the requirement,
 
Hardware - Input, Output
Software - Programming, Configuration
  • Create SharePoint List named “RequestAsset”

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  • Go to setting and create column Named “RequestType” and column type is “Lookup” as shown below.
sr no
Column Name
Column Type
Description
1
RequestType
Lookup
Get inf from (RequestType list) and Column is Title

Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part
  • All columns will look like this,

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  • Add the following data in this list

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

List 3: AssetNames

 
The list contains sub types of the requirement
 
Input - Keyboard, Mouse, Joystick
Output - Monitor, Printer
Programming - Visual Studio, Matlab, Netbeans
Configuration - Infopath, Sharepoint Designer
  1. Create SharePoint List named “AssetNames”

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  2. Go to setting and create column Named “RequestAsset” and column type is “Lookup” as shown below.

    sr no Column Name Column Type Description
    1 RequestAsset Lookup Get inf from (RequestAsset list) and Column is Title


    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  3. All columns will look like this

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  4. Add the following data in this list

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part
All data is set for cascading. Now to access this data, create a fourth list
 

List 4: New Requirement

 
This is the list where we can achieve our output
  1. Create SharePoint List named “New Requirement”

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  2. Add three lookup columns as shown below

    sr no Column Name Column Type Description
    1 RequestType Lookup Get inf from (RequestType list) and Column is Title
    2 RequestAsset Lookup Get inf from (RequestAsset list) and Column is Title
    1 AssetNames Lookup Get inf from (AssetNames list) and Column is Title

    Refer to the below three screenshots for three columns,
     
    1.RequestType column

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part
    2.RequestAsset Column

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part
    3.RequestNames Column

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  3. All columns will look like this:

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  4. Your list will look like the following. To write code for cascading, click on New item as shown below

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  5. Following new form will open

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  6. Edit the form by using Gear icon on Top Right side

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  7. Click on Insert button on Top Left side then select Media and Content, then click on Script Editor and click Add button on right

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  8. Click on edit snippet

    Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part

  9. Paste below code and click insert and  stop editing the page
The following piece of code is for first level cascading dropdown,
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part 
Output
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part 
 
If you select Hardware in first column, Request Asset will filter with Input and Output Only,
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part 
 
If you select Software in first column, Request Asset will filter with configuration tools and programming only,
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part 
The following piece of code is for second level cascading dropdown,
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part 
 
Output
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part 
If you select Request Type as Hardware and Request asset as Input then the third column will filter with “Keyboard”, ”Mouse”, Joystick” dropdown options.
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part 
If you select Request Type as Hardware and request asset as Output then the third column will filter with “Keyboard”, ”Mouse”, Joystick” dropdown options.
 
Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor Web Part
Common method for above both piece of code is $().methoddropdown(Dropdownlist); and the whole code is as follows,
  1. <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>  
  2. <script type="text/javascript">  
  3.     $(document).ready(function() {  
  4.       
  5.         var Dropdownlist = new Array();  
  6.           
  7.         Dropdownlist.push({  
  8.             rootlistname: "RequestType"//1st (root) list Display name  
  9.             leaflistname: "RequestAsset"//2nd (leaf) List name  
  10.             leaflookupcolumn: "Title"//Internal field name in leaf List used in lookup  
  11.             mainformcolumnleafref: "RequestAsset"//main form (4th list)2nd column Display name  
  12.             mainformcolumnrootref: "RequestType"// main form (4th list) 1st column Display name  
  13.             defaultddwn: "< Select a Asset Type >"  
  14.         });  
  15.             Dropdownlist.push({  
  16.             rootlistname: "RequestAsset"//2nd (root) list Display name  
  17.             leaflistname: "AssetNames"//3rd (leaf) List name.  
  18.             leaflookupcolumn: "Title"//Internal field name in leaf List used in lookup  
  19.             mainformcolumnleafref: "AssetNames"//main form (4 th list) 3rd column Display name  
  20.             mainformcolumnrootref: "RequestAsset"// main form (4 th list) 2nd column Display name  
  21.             defaultddwn: "< Select a Asset Name >"  
  22.         });  
  23.         $().methoddropdown(Dropdownlist);  
  24.         });  
  25. $.fn.methoddropdown= function (dropdownvalueArray)  
  26. {  
  27.     var ddwndropdownvalue = new Array();  
  28.      var mainform = getParameterByName("ID") == null;  
  29.     $.fn.methoddropdown.Cascade = function(root,ddwnindex)  
  30.     {  
  31.         if (ddwnindex!= null && ddwnindex+1 > ddwndropdownvalue.length)  
  32.         {  
  33.             return;  
  34.         } else if(ddwnindex== null) {  
  35.             ddwnindex= $(root).attr("methoddropdownIndex");  
  36.         }         
  37.         var params = ddwndropdownvalue[ddwnindex];  
  38.         var rootID = $(root).val();  
  39.         if (root == null)  
  40.         {     
  41.             rootID = $("select[Title='"+params.rootlistname+"'], select[Title='"+  
  42.                 params.rootlistname+" Required Field']").val();  
  43.         }  
  44.         if (rootID == undefined)  
  45.         {  
  46.             rootID = 0;  
  47.         }  
  48.           
  49.         var leaf = $("select[Title='"+params.mainformcolumnleafref+"'], select[Title='"+  
  50.             params.mainformcolumnleafref+" Required Field']," +  
  51.             "select[Title='"+params.mainformcolumnleafref+" possible values']");  
  52.           
  53.         var selectedoption = params.selectedoptionue;  
  54.         ddwndropdownvalue[ddwnindex].selectedoptionue = 0;  
  55.                   
  56.         $(leaf).empty();  
  57.       
  58.         var dropdownvalue = "<option value='0'>"+params.defaultddwn+"</option>";  
  59.   
  60.         var varstore = $.ajax({  
  61.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('"+params.leaflistname+  
  62.                 "')/items?$select=Id,"+params.leaflookupcolumn+","+params.mainformcolumnrootref+  
  63.                 "/Id&$expand="+params.mainformcolumnrootref+"/Id&$filter="+params.mainformcolumnrootref+  
  64.                 "/Id eq "+ rootID+"&$orderby=" + params.leaflookupcolumn,  
  65.             type: "GET",  
  66.             dataType: "json",  
  67.             headers: {  
  68.                 Accept: "application/json;odata=verbose"  
  69.             }         
  70.         });  
  71.         varstore.done(function (data,textStatus, jqXHR){  
  72.             for (index in data.d.results)  
  73.             {  
  74.                 dropdownvalue += "<option value='"+ data.d.results[index].Id +"'>"+  
  75.                     data.d.results[index][params.leaflookupcolumn]+"</option>";  
  76.             }  
  77.             $(leaf).append(dropdownvalue);  
  78.             if(!mainform)$(leaf).val(selectedoption);  
  79.             $().methoddropdown.Cascade(null,Number(ddwnindex)+1);  
  80.         });  
  81.         varstore.fail(function (jqXHR,textStatus,errorThrown){  
  82.             alert("Error retrieving information from list: " + params.leaflistname + jqXHR.responseText);  
  83.             $(leaf).append(dropdownvalue);  
  84.         });  
  85.     }      
  86.     for (index in dropdownvalueArray)  
  87.     {  
  88.         var thisCascade = dropdownvalueArray[index];  
  89.           
  90.         if(thisCascade.rootlistname != null)  
  91.         {  
  92.             var root = $("select[Title='"+thisCascade.rootlistname+"'], select[Title='"+  
  93.                 thisCascade.rootlistname+" Required Field']");  
  94.               
  95.             $(root).attr("methoddropdownIndex",index);  
  96.               
  97.             $(root).change(function(){  
  98.                 $().methoddropdown.Cascade(this,null);          
  99.             });              
  100.         }   
  101.         thisCascade.selectedoptionue = $("select[Title='"+thisCascade.mainformcolumnleafref+"'], select[Title='"+  
  102.             thisCascade.mainformcolumnleafref+" Required Field']," +  
  103.             "select[Title='"+thisCascade.mainformcolumnleafref+" possible values']").val();    
  104.         ddwndropdownvalue.push(thisCascade);  
  105.     }  
  106.     $().methoddropdown.Cascade(null,0);          
  107.     function getParameterByName(key) {  
  108.             key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars  
  109.             var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));  
  110.             return match && decodeURIComponent(match[1].replace(/\+/g, " "));  
  111.         }}  
  112. </script>