How can I add cascading dropdown to newform.aspx page of list using jQuery. I tried SPServices from codeplex but it's not working. Can anybody please guide me.


  • Maybe add a little more description of what you want and why SPServices isn't working for you – Per Jakobsen Mar 20 '12 at 8:48
  • i am using this code $(document).ready(function () { $().SPServices.SPCascadeDropdowns({ listName:"Test", relationshipList:"Sub Department", relationshipListParentColumn:"Department", relationshipListChildColumn:"Sub Department", parentColumn:"Department", childColumn:"Sub Department", debug:true }); }); The cascading functionality is not working for the above script – alam235 Mar 20 '12 at 9:16
  • At least the relationshipListChildColumn is wrong it should be the static name of the column which probably is Sub_x0020_Department (try to click the field in the list settings and see what url specifies as Field= then you need to urldecode this (%2F -> _) – Per Jakobsen Mar 20 '12 at 9:28
  • If you have debug turned on, which your script shows, then SPServices will alert you as to what is wrong (ie: Cannot find list "Sub Department"). If it's not working and you're not seeing any debug, double check that jQuery is being loaded prior to the script running, and check the console for the page in something like the Google Chrome dev tools to see if any JavaScript errors are being thrown. – webdes03 Mar 20 '12 at 11:42
  • Also remember that when using jQuery with SharePoint it should be in noConflict mode and then you must use jQuery instead of $ – Per Jakobsen Mar 20 '12 at 13:19

One way to use cascading dropdowns (from SPServices) is the following approach:

  1. Register a user control (ASCX) for the new form in the list schema definition (schema.xml), e.g. YourCustomListNewForm
  2. Create the user control (ASCX) that you have registered for the new form, e.g. YourCustomListNewForm.ascx

I have cut&paste an example from some working code. I have not tested this, but it should help you along. Note that the list 'Some List' must have a lookup column called 'SomeField' and a 'Title' column that contains the values you want to display in the dropdown. The list with custom the new form has two looup columns called 'SomeField' and 'OtherField' (to 'Some List').

Step 1 - Register ASCX:

<List ...>
          <XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
            <FormTemplates xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">

Step 2 - Create ASCX:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="YourCustomListNewForm.ascx.cs" Inherits="YourCustomListNewForm" %>

<script type="text/javascript">
    $(window).load(function () {
            relationshipList: "Some List",
            relationshipListParentColumn: "SomeField (internal name)",
            relationshipListChildColumn: "Title",
            relationshipListSortColumn: "ID",
            parentColumn: "SomeField (display name)",
            childColumn: "OtherField (display name)",
            promptText: "(None)"
            // ,debug: true
<table cellpadding="0" cellspacing="0">
        <td width="190" class="ms-formlabel">
            <h3 class="ms-standardheader">
                <asp:Label ID="lblSomeField" runat="server" Text="Some Field" /></h3>
        <td class="ms-formbody">
            <SharePoint:LookupField ID="lfSomeField" runat="server" FieldName="SomeField" />
        <td width="190" class="ms-formlabel">
            <h3 class="ms-standardheader">
                <asp:Label ID="lblOtherField" runat="server" Text="Other Field" /></h3>
        <td class="ms-formbody">
            <SharePoint:LookupField ID="lfOtherField" runat="server" FieldName="OtherField" />
  • I haven't seen this approach before, but I like it. Most people using SPServices are SharePoint Designer people, as opposed to using managed solutions. This gives you the flexibility of SPServices matched with the convenience of a package and source control. Thanks for posting! – webdes03 Mar 20 '12 at 11:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.