SPServices: Cascading Drop-Down List in SharePoint 2010 List using jQuery

1. Create Cities custom list:

2. Create Districts Custom list: with City lookup column

3. Create Ward custom list: with District lookup column

4. Create Addresses list: with City, District, Ward lookup columns

Using following scripts in the NewForm.aspx of Addresses

<script src="/TimeSheet/jQuery%20Libraries/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/TimeSheet/jQuery%20Libraries/jquery.SPServices-0.5.4.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $().SPServices.SPCascadeDropdowns({
                relationshipList: "Districts",
                relationshipListParentColumn: "City",
                relationshipListChildColumn: "Title",
                relationshipListSortColumn: "ID",
                parentColumn: "City",
                childColumn: "District",
                promptText: "Choose District...",
                debug: true
            });
 
            $().SPServices.SPCascadeDropdowns({
                relationshipList: "Ward",
                relationshipListParentColumn: "District",
                relationshipListChildColumn: "Title",
                relationshipListSortColumn: "ID",
                parentColumn: "District",
                childColumn: "Ward",
                promptText: "Choose Ward...",
                debug: true
            });
        });
</script>

Hope this help!

This Post Has 0 Comments

  1. Ro

    how do I modify NewForm.aspx of Addresses — Pretty new to all this

  2. Jack

    @Ro: Open the list, click on the tab “List” in the ribbon menu, then on the button “Form web parts” and choose the “New Form”.

  3. Jen

    Thanks! It helps! I met another issue since I have many records (more than 20), and it requires double-click for options. Is there any way to solve that? Thanks!

  4. Aparna

    Hi,
    If columns are mandatory, “Choose District” or “Choose Ward” is not effecting.
    Please help me out

  5. Sunny

    I have a drop down menu with “on ” and “off” values. If value “on” is selected, cascading drop down should work. If “off” is selected, then drop down should display cascading drop down values. Please help me out

  6. Moses

    I feel i am skipping parts of this, as i have not got this to work? can this is be explained step by step in a dummies guide?

Leave a Reply