Cascading dropdownlist in SharePoint 2010 list using jQuery

cascading dropdown in sharepoint 2013 list
InfoPath alternatives for form designing SharePoint

Here we will discuss how we can implement cascading dropdownlist in SharePoint 2010 list using jQuery. Same way we can also implement cascading dropdownlist in SharePoint 2013 or SharePoint 2016.

If you want to learn SharePoint online then you can Download a FREE PDF on SharePoint online tutorial and Download FREE PDF on HUB site in SharePoint online.

For Implementing Cascading Drop-Down List in SharePoint 2010 List using jQuery and SP services follow below steps:

First create a country list like below:

cascading dropdown in sharepoint 2013
cascading dropdown in sharepoint 2013

Then create a State list with Country as lookup column, the lookup settings will come like below:

sharepoint 2013 cascading dropdown jquery
sharepoint 2013 cascading dropdown jquery

Finally the state list should be like below:

cascading dropdown in sharepoint 2013 list
cascading dropdown in sharepoint 2013 list

Select Default New Form under List tab of newly created List CascadeDropDownList

cascading dropdown in sharepoint 2013 document library
cascading dropdown in sharepoint 2013 document library

Add content Editor Web part and Select Edit HTML Source under Format Text Tab

cascading dropdown sharepoint 2010 jquery
cascading dropdown sharepoint 2010 jquery



Then Copy and Paste the below Code in HTML Editor

<script language=”javascript” src=”/JSLibrary/jquery-1.4.2.min.js” type=”text/javascript”></script><script language=”javascript” src=”/JSLibrary/jquery.SPServices-0.5.7.min.js” type=”text/javascript”></script><script type=”text/javascript”>
$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
relationshipList: “State”,
relationshipListParentColumn: “Country”,
relationshipListChildColumn: “Title”,
relationshipListSortColumn: “ID”,
parentColumn: “Country”,
childColumn: “State”,
promptText: “Choose State…”,
debug: true
});

});</script>

After this it will appear like below:

how to create a cascading drop down list in sharepoint 2013
how to create a cascading drop down list in sharepoint 2013

In some scenario we need to implementing cascading type of concept in OOB forms as for example by selecting Countries respective states or cities. It’s not easier in SharePoint.

Similar SharePoint 2013 Tutorials


About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply