This jQuery utility works for both SharePoint 2010 and 2013
I recently had to use client side (javascript) cascading DropDownLists for my SharePoint 2010 project.
There are a lot of posts for cascade Dropdowns inside a form, but i needed to use it on a custom .aspx page.
I found a very interesting utility made by Anita Boerboom. It was using both jQuery and SPServices, worked only for 2 cascade dropdownlists, so i updated it.
I made my own utility based on Anita's one, but using the COM (Client Object Model) and only requiring jQuery. With the possibility to use multiple level cascades (no limits).
Here is a sample based on cascades with 3 levels (Countries / Cities / Streets) :
2 Create a list named "Cities", add a lookup column named "Country" that point to the "Countries" list.
3 Create a list named "Streets", add a lookup column named "City" that point to the "Cities" list.
Be sure to store the Jquery and SLN_SPcascadingdropdown in a document library or in your LAYOUTS.
Dont forget to use the "ExecuteOrDelayUntilScriptLoaded(LoadSLNCascade, "SP.js");" : We use the standard Client Object Model provided by SharePoint, so we need to wait for the "SP.js" script to be loaded before executing Client Object requests.
For multiple levels cascade dropdowns, the "autoFillParentDropDownList" must be true for the first level of cascade, and false for other levels.
The "defaulFillChildDropDownList" will be false on most multiple levels cascade dropdown cases.
Here we have 3 cascade dropdownlists, but there is no limitation.
If we use the defaulFillChildDropDownList = true : All values are displayed on the child dropdown. :
I recently had to use client side (javascript) cascading DropDownLists for my SharePoint 2010 project.
There are a lot of posts for cascade Dropdowns inside a form, but i needed to use it on a custom .aspx page.
I found a very interesting utility made by Anita Boerboom. It was using both jQuery and SPServices, worked only for 2 cascade dropdownlists, so i updated it.
I made my own utility based on Anita's one, but using the COM (Client Object Model) and only requiring jQuery. With the possibility to use multiple level cascades (no limits).
Here is a sample based on cascades with 3 levels (Countries / Cities / Streets) :
Set up the Context :
1 Create a list named "Countries"2 Create a list named "Cities", add a lookup column named "Country" that point to the "Countries" list.
3 Create a list named "Streets", add a lookup column named "City" that point to the "Cities" list.
Be sure to store the Jquery and SLN_SPcascadingdropdown in a document library or in your LAYOUTS.
Add the HTML and Javascript :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <script src="../javascript/jquery-1.10.2.min.js" type="text/javascript"></script><script src="../javascript/SLN_SPcascadingdropdown.js" type="text/javascript"></script><script type="text/javascript"> $(document).ready(function () { ExecuteOrDelayUntilScriptLoaded(LoadSLNCascade, "SP.js"); function LoadSLNCascade() { $('#countries').SLN_SPcascadingdropdown( { relationshipList: "Cities", relationshipParentList: "Countries", relationshipParentListColumn: "Title", relationshipListChildColumn: "Title", relationshipListParentColumn: "Country", childDropDown: "cities", autoFillParentDropDownList: true, defaulFillChildDropDownList: false, promptText: "-- Select Value --" }); $('#cities').SLN_SPcascadingdropdown( { relationshipList: "Streets", relationshipParentList: "Cities", relationshipParentListColumn: "Title", relationshipListChildColumn: "Title", relationshipListParentColumn: "City", childDropDown: "streets", autoFillParentDropDownList: false, defaulFillChildDropDownList: false, promptText: "-- Select Value --" }); }});</script><select id="countries"></select><select id="cities"></select><select id="streets"></select> |
Dont forget to use the "ExecuteOrDelayUntilScriptLoaded(LoadSLNCascade, "SP.js");" : We use the standard Client Object Model provided by SharePoint, so we need to wait for the "SP.js" script to be loaded before executing Client Object requests.
Parameters :
- relationshipList : The name of the SPlist which contains the parent/child relationships.
- relationshipParentList : The name of the SPlist which contains the parent items.
- relationshipParentListColumn : The StaticName of the values column in the relationshipParentList.
- relationshipListChildColumn : The StaticName of the child column in the relationshipList.
- relationshipListParentColumn : The StaticName of the parent column in the relationshipList
- childDropDown : The id of the child DropDownList
- autoFillParentDropDownList : Fill the parent DropDownList with all ParentList values (set false if you want to keep old selected values)
- defaulFillChildDropDownList : Fill the child DropDownList with all ChildList values if no value is selected for parent DropDownList.
- promptText : The default text displayed in the dropdownlists
For multiple levels cascade dropdowns, the "autoFillParentDropDownList" must be true for the first level of cascade, and false for other levels.
The "defaulFillChildDropDownList" will be false on most multiple levels cascade dropdown cases.
Screenshots with multiple levels cascade dropdown (using the above code) :
 |
| Initial state |
 |
| 1st list selection |
 |
| 2nd list selection when parent list is selected |
 |
| 3rd list selection when all parent lists are selected |
Here we have 3 cascade dropdownlists, but there is no limitation.
If we use the defaulFillChildDropDownList = true : All values are displayed on the child dropdown. :
 |
| defaulFillChildDropDownList = true |
Download :
You can download the utility from the Codeplex project page :
https://spcascadingdropdown.codeplex.com/
https://spcascadingdropdown.codeplex.com/
No comments:
Post a Comment