basquang™ on clouds

September 21, 2010

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

Filed under: SharePoint — basquang @ 4:15 AM

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!

Advertisements

6 Comments »

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

    Comment by Ro — October 20, 2011 @ 1:43 AM | Reply

  2. @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”.

    Comment by Jack — November 17, 2011 @ 7:50 PM | Reply

  3. 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!

    Comment by Jen — July 18, 2012 @ 12:36 AM | Reply

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

    Comment by Aparna — February 12, 2014 @ 2:00 AM | Reply

  5. 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

    Comment by Sunny — March 23, 2014 @ 10:48 AM | Reply

  6. 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?

    Comment by Moses — August 20, 2014 @ 6:12 PM | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: