Cascading Dropdown in Share point using JQuery


Here I am showing how to make a cascading drop down in share point using JQuery have created two lists Stationary and Items. In Items list Stationary be a look up column from Stationary. I want to achieve while selecting the Category say Stationary items from Items list which belongs to Stationary will be populated in the second drop down

Stationary List

image1.gif

Items List

Stationary field in this list be a lookup column from the Stationary List

image2.gif

1. Down load the jquery-1.3.2.min.js by Jquery.com, from the below link
 http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js

2. And jquery.SPServices-0.5.6.min.js from the below link

http://spservices.codeplex.com/

3. After downloading upload these two files in a document library

4. Now you have to create third list where you want to implement the cascading drop down in my case Purchase
Where Category be a lookup column from Stationary List and Items be a lookup field from Items List

image3.gif

5. Open your web application in Share point Designer. Go to the Purchase list and open NewForm.aspx in Share point designer after checking out

6. Paste the below code just below the Placeholder Main

image4.gif

7. Save Your Changes and Check in

8. Now you can see in Purchase, when adding a new items second drop down is filtered based on the category selection

image5.gif