Using jQuery add cascading dropdown to newform.aspx page of list

Question

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.

Thanks

Answer 1

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 ...>
  <MetaData>
        <XmlDocuments>
          <XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
            <FormTemplates xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
              <New>YourCustomListNewForm</New>
            </FormTemplates>
          </XmlDocument>
        </XmlDocuments>

Step 2 - Create ASCX:

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

<script type="text/javascript">
    $(window).load(function () {
        $().SPServices.SPCascadeDropdowns({
            relationshipList: "Some List",
            relationshipListParentColumn: "SomeField (internal name)",
            relationshipListChildColumn: "Title",
            relationshipListSortColumn: "ID",
            parentColumn: "SomeField (display name)",
            childColumn: "OtherField (display name)",
            promptText: "(None)"
            // ,debug: true
        });
    });
</script>
<table cellpadding="0" cellspacing="0">
    <tr>
        <td width="190" class="ms-formlabel">
            <h3 class="ms-standardheader">
                <asp:Label ID="lblSomeField" runat="server" Text="Some Field" /></h3>
        </td>
        <td class="ms-formbody">
            <SharePoint:LookupField ID="lfSomeField" runat="server" FieldName="SomeField" />
        </td>
    </tr>
    <tr>
        <td width="190" class="ms-formlabel">
            <h3 class="ms-standardheader">
                <asp:Label ID="lblOtherField" runat="server" Text="Other Field" /></h3>
        </td>
        <td class="ms-formbody">
            <SharePoint:LookupField ID="lfOtherField" runat="server" FieldName="OtherField" />
        </td>
    </tr>
</table>