SharePoint 2013: Cascade Dropdown List using SPServices –$().SPServices.SPCascadeDropdowns
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"
https://social.msdn.microsoft.com/Forums/getfile/1036568
2. "Skills":
https://social.msdn.microsoft.com/Forums/getfile/1036569
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:
- Select "Software Developer":
https://social.msdn.microsoft.com/Forums/getfile/1036573
It will display skill related to Software Developer.
- Select "UI Developer":
https://social.msdn.microsoft.com/Forums/getfile/1036574
It will display skill related to UI Developer.