Continuing my last post I will show some JavaScript that can be used to implement cascading drop down lists in SharePoint. Assume you have Products list and Categories list. Products have a lookup column to the Categories list. And we have Order line list which have lookup columns to Products list and to Categories list. When creating new Order line item we want that when Category is select then the Product combo box must be filtered to show only selected category products:

Again jQuery, SPAPI and CEWP comes to help. The only problem is that SharePoint renders combo box as INPUT or SELECT control depending on how much items it have. The following script has workaround for it (see comments inside):

//Set up jQuery and SPAPI (in my case I have installed jQuery and SPAPI in Layouts directory) 
<script src="/_layouts/jquery-1.3.2.js" type="text/javascript"></script> 
<script src="/_layouts/SPAPI/SPAPI_Core.js" type="text/javascript"></script> 
<script src="/_layouts/SPAPI/SPAPI_Lists.js" type="text/javascript"></script>  
<script type="text/javascript"> 

//You may need do modify this function depending where your site collection is located
function GetRootUrl() {
    var pathparts = document.location.pathname.split('/');
    var url = 'http://' + document.location.host + '/' + pathparts[1] + '/';
    return url;
}

lastSelectedCategory = 0;

//filter product by selected catagory
function FilterProducts() {

    //get Product control (it can be INPUT or SELECT)
    var productElement = $("select[title='Product']");
    if (productElement.length == 0) { productElement = $("input[title='Product']"); }
    if (productElement.length == 0) return;

    //get Product Category control (it can be INPUT or SELECT)
    var categoryElement = $("select[title='Product Category']");
    if (categoryElement.length == 0) { categoryElement = $("input[title='Product Category']"); }
    if (categoryElement.length == 0) return;

    //get selected Product Category value
    var category = '';
    if (categoryElement[0].optHid) { category = document.getElementById(categoryElement[0].optHid).value; }
    else { category = categoryElement[0].value; }

    if (lastSelectedCategory != category) {

        var foundedSelectedProductID = '';
        var foundedSelectedProduct = '';

        //get sletected Category Products
        var lists = new SPAPI_Lists(GetRootUrl());
        var items = lists.getListItems(
		'Products',   // listName 
		'',         // viewName 
		'<Query><Where><Eq><FieldRef Name="Product_x0020_Category" LookupId="TRUE"/><Value Type="Lookup">' + category + '</Value></Eq></Where></Query>',  // query 
		'<ViewFields><FieldRef Name="ID"/><FieldRef Name="Title"/></ViewFields>',  // viewFields 
		'',  // rowLimit 
		'<QueryOptions><IncludeMandatoryColumns>FALSE</IncludeMandatoryColumns></QueryOptions>'  // queryOptions 
	);

        if (items.status == 200) {
            var rows = items.responseXML.getElementsByTagName('z:row');
            var options = '';
            //format Products values for INPUT control
            if (productElement[0].optHid) {
                var productSelected = document.getElementById(productElement[0].optHid).value;
                for (var i = 0; i < rows.length; i++) {
                    var productID = rows[i].getAttribute('ows_ID');
                    if (productID == productSelected) { //trying to select the same product in new category if it exists
                        foundedSelectedProductID = productID;
                        foundedSelectedProduct = rows[i].getAttribute('ows_Title');
                    }
                    options += rows[i].getAttribute('ows_Title') + '|' + productID + '|';
                }
                
                productElement[0].choices = options.substring(0, options.length - 1);
                
                productElement[0].value = foundedSelectedProduct;
                productElement[0].match = foundedSelectedProduct;
                document.getElementById(productElement[0].optHid).value = foundedSelectedProductID;

            } else {
            //format Products for SELECT control
                var productSelected = productElement[0].value;
                for (var i = 0; i < rows.length; i++) {
                    var productID = rows[i].getAttribute('ows_ID');
                    if (productID != productSelected) {//trying to select the same product in new category if it exists
                        options += '<option value="' + productID + '">' + rows[i].getAttribute('ows_Title'); +'</option>';
                    } else {
                        options += '<option selected="selected" value="' + productID + '">' + rows[i].getAttribute('ows_Title'); +'</option>';
                    }
                }
                productElement.html(options);
            }
        }
        lastSelectedCategory = category;
    }
}


$(document).ready(
     function() {
        
         //FilterProducts(); //uncomment if you want Products be filttered on startup;
         
         // Filter products on Category change (Category also can be INPUT or SELECT)
         var categoryElement = $("select[title='Product Category']");
         if (categoryElement.length == 0) { categoryElement = $("input[title='Product Category']"); }
         if (categoryElement.length != 0) {
             if (categoryElement[0].optHid) {
                 $("input[id='" + categoryElement[0].optHid + "']").bind("propertychange", function() { FilterProducts(); });
             } else {
                 $("select[title='Product Category']").change(function() { FilterProducts(); });
             }
         }
         // End Change Product Category
     }
    ); 

Using this technique you can implement as many cascading levels as you want and you can filter cascading lists by any CAML query you want.