I’ve been using InfoPath to achieve this effect in Sharepoint lists but somehow I can’t wrap my head around the data connections and filters and all that. I always need to consult this Youtube video  (which is great btw).

jQuery is nice because you can just paste the code within your NewForm.aspx inside the PlaceHolderMain tags and it will work. No mucking around with filters in InfoPath.

So let’s start.

You need to download jQuery and SPServices.

The latest jQuery (production code) right now is this:

http://code.jquery.com/jquery-1.8.2.min.js

* Update Feb. 5, 2013: Do not use the latest jquery minified version (as of now, 1.9.1) as it breaks SPServices. Use jquery-1.8.2.

Download the latest SPServices at codeplex:

http://spservices.codeplex.com/

Save the *.js files in a Library in the same site you are trying to get the cascading lists to run.

Now here’s the fun part.

Part I. Create the Parent and the Child Lists

Parent List

Let’s use the name ‘MainCategory‘ as the name of the parent list.

It will only have 1 column: Title. Create 2 items: Hardware and Software.

Child List (or the relational list)

This is also called the relational list because in here you will come to specify the relationship between the parent and child dropdowns.

Let’s name the child list as ‘SubCategory‘.

This list will have 2 columns: Title and Hardware.

Populate Title with computer related items, both hardware and software names.

The ‘Hardware‘ column is a lookup column for the ‘MainCategory‘ list (parent list).

Fix the list so the items are all matched with their category like so:

Part II. Create the Form

The Form is the list where the cascading effect will happen.

It will have 2 columns: Hardware and Software.

Both are lookup columns:

Hardware is a lookup column to the MainCategory list.

Software is a lookup column to the SubCategory list.

I left the Title column in there but it’s not important for this experiment.

Let’s name this third list as ‘RequestForm‘.

Part III. Upload jQuery and SPServices and check if they are working

Before trying to do the cascade effect, let’s make sure that the javascript files are being called properly without any problems.

Open RequestForm list’s NewForm.aspx file in Sharepoint Designer in Advanced Mode.

Go into the Code View and search for the tag ‘PlaceHolderMain‘. You will come to this tag:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

Here’s how it will look like in Sharepoint Designer:

Immediately after that ‘PlaceHolderMain‘ tag, paste the code below:

Credits to Marc D Anderson for this nice tip! I just changed the path to the JS files. I uploaded it to the Shared Documents library on the same site.

<script type="text/javascript" language="javascript" src="../../Shared%20Documents/jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="../../Shared%20Documents/jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function() {
    alert("jQuery");
   alert($().SPServices.SPGetCurrentSite());
  });
</script>

Save the NewForm.aspx file and load it in the browser (or just add an item to the RequestForm list). You should be getting pop-up notifications after the page is loaded.

This just means your jQuery files are working. Nothing to be overly excited about. But this check right here will save you the headaches of debugging your cascade code when all this time what is wrong with it is just the path.

Part IV. The Cascade Code

Remove the Check Code above if it’s working (and fix it if it’s not).

Replace it with this code (still right after ‘PlaceHolderMain’ tag):

<script language="javascript" type="text/javascript" src=".../../Shared%20Documents/jquery-1.8.2.min.js"></script>
<script language="javascript" type="text/javascript" src="./../Shared%20Documents/jquery.SPServices-0.7.2.min.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function() {
		$().SPServices.SPCascadeDropdowns({
			relationshipList: "SubCategory",
			relationshipListParentColumn: "MainCategory",
			relationshipListChildColumn: "Title",
			parentColumn: "Hardware",
			childColumn: "Software",
			debug: true
		});
	});
</script>

Let’s go through that one line at a time.

Lines 1 and 2 loads jquery and SPServices:

<script language="javascript" type="text/javascript" src="../../Shared%20Documents/jquery-1.8.2.min.js"></script>
<script language="javascript" type="text/javascript" src="../../Shared%20Documents/jquery.SPServices-0.7.2.min.js"></script>

Lines 3 to 13 is the actual call to do the cascade function ‘SPCascadeDropdowns‘.

relationshipList is our child list called ‘SubCategory’.

relationshipListParentColumn is the name of the lookup column for the parent items ‘MainCategory‘ which is NOT the name of the parent list. Please don’t be confused by this. So let me repeat it, it is the name of the column that looks up to the parent list. It’s the column pointed to by the red arrow, boxed in red:

parentColumn is the name of the lookup column in the RequestForm list for the parent items.

childColumn is the name of the lookup column in the RequestForm list for the child items.

Save the NewForm.aspx and try adding an item to the RequestForm list.