What is Cascading Dropdown List:

One drop-down list content depends on parent dropdown list selection, that is called cascading dropdown list. For example, in a registration form, on the selection of Country display states related to the selected country.

$().SPServices.SPCascadeDropdowns:

The $().SPServices JavaSciprt Add-on provides the function called SPCascadeDropdowns function, with the help of this function, we can implement cascading dropdowns using lookup fields on SharePoint out of the box forms (NewForm/EditForm).

How to use $().SPServices.SPCascadeDropdowns:

Created three lists:

1. "Speciality"

             "Title"

2. "Skills":

         "Title"

          "Speciality" as lookup column and shows "Title" column, a column named as "Speciality".

3. "UsersNetwork":

         "Title"

          "Speciality" list as lookup column and shows "Title", a column named as "Specialities"

          "Skills" list as lookup column and shows "Title" column, and a column named as "User Skills"


Added following values to the list:

1. "Speciality"

2. "Skills":




Add scripteditor webpart in the newform.aspx or editform.aspx of "UsersNetwork" and include below mentioned code block

<script type="text/javascript">
 
           $(document).ready(function () {
               $().SPServices.SPCascadeDropdowns({
                   relationshipList: "Skills",
                   relationshipListParentColumn: "Speciality",
                   relationshipListChildColumn: "Title",
                   parentColumn: "Specialities",
                   childColumn: "UserSkkills",
                   debug: true
               });
           });
</script>

After adding the code, access the NewForm.aspx of UsersNetwork list:

  1. Select "Software Developer":

It will display skill related to Software Developer.

  1. Select "UI Developer":

It will display skill related to UI Developer.

Reference:

SPServices Documentation