SPServices Cascade dropdown columns with an example

SharePoint 2007 lacks support to access SharePoint object model in javascript as opposed to SharePoint 2010 that has CSOM (client side object model).

SPServices is a javascript library that can access SharePoint object model. Using that library we can build up cascade dropdown functionality in a list's NewItem or EditItem forms.

Lets say we have three lists Countries, Cities and Regions.

The columns of these lists are
Countries: Title
Cities: Title, Country (lookup column from Countries)
Regions: Title, City (lookup column from cities)

Create a target list "Company" and create three lookup columns Country, City and Region.

Go to the NewForm and EditForm of the target list and put this code snippet in a CEWP.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="http://moss-dev:7780/_layouts/jquery.SPServices-2013.01.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){

    $().SPServices.SPCascadeDropdowns({
      relationshipList: "Cities",
      relationshipListParentColumn: "Country",
      relationshipListChildColumn: "Title",
      parentColumn: "Country",
      childColumn: "City",
      debug: true
    });

    $().SPServices.SPCascadeDropdowns({
      relationshipList: "Regions",
      relationshipListParentColumn: "City",
      relationshipListChildColumn: "Title",
      parentColumn: "City",
      childColumn: "Region",
      debug: true
    });

});
</script>

Test the three dropdowns on the forms to see in action.