Cascade Dropdown

Question

I have two lists one for "States" and another for "Cities". I referred this solution - http://www.markrackley.net/2014/05/20/cascading-drop-down-lists-in-sharepoint-office-365-using-rest/ and I did same as described there but I got this error -

Pls give me some solution. My Code is:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        HillbillyCascade({
            parentFormField: "State", //Display name on form of field from parent list
            childList: "Cities", //List name of child list
            childLookupField: "Title", //Internal field name in Child List used in lookup
            childFormField: "City", //Display name on form of the child field
            parentFieldInChildList: "State" //Internal field name in Child List of the parent field
        });
    });
    function HillbillyCascade(params)
    {
        var parent = $("select[Title='"+params.parentFormField+"'], select[Title='"+
            params.parentFormField+" Required Field']");

        $(parent).change(function(){
            DoHillbillyCascade(this.value,params);        
        });

        var currentParent = $(parent).val();
        if (currentParent != 0)        
        {
            DoHillbillyCascade(currentParent,params);
        }

    }


    function DoHillbillyCascade(parentID,params)
    {

        var child = $("select[Title='"+params.childFormField+"'], select[Title='"+
            params.childFormField+" Required Field']," +
           "select[Title='"+params.childFormField+" possible values']");

        $(child).empty();

        var options = "";

        var call = $.ajax({
            url: "http://sp2010dev:1234/_vti_bin/listdata.svc/"+params.childList+
                "?$select=Id,"+params.childLookupField+","+params.parentFieldInChildList+
                "Id&$filter=("+params.parentFieldInChildList+
                "Id eq "+ parentID + ")",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }

        });
        call.done(function (data,textStatus, jqXHR){

            for (index in data.d.results)
            {
                options += "<option value='"+ data.d.results[index].Id +"'>"+
                    data.d.results[index][params.childLookupField]+"</option>";
            }
            $(child).append(options);

        });
        call.fail(function (jqXHR,textStatus,errorThrown){
            alert("Error retrieving information from list: " + params.childList + jqXHR.responseText);
            $(child).append(options);
        });   
    }
</script> 

I have three lists. First is "States", having one column "Title". Second list's name is "Cities" and it has two columns one is "Title" and other is "State" which is a lookup with States list. Now, third list's name is "Cascade", having three columns "Title", "State" which is lookup with States list and last column name is "City" Which is lookup with "Cities" list's "Title" Column.

I don't understand where I did mistake.

Pls guide me.

Answer 1

We use JavaScript on some of our lists to do the cascade

The code below is for 2 cascades - have annotated what each line does below. Took us a while to figure it out to be honest and wrap our head round it. Easiest way to think about it is using index and match in excel. Once you get your head around it you can do loads of layers. We have some lists that do 8 layered cascades - it's awesome for us as before this we would have multiple lists basically doing the same thing but with different options

Hope this helps - to get this code to work on your Newform.aspx add a script editor at the top of the form and then paste this in the snippet with your list values updated

<script src="/YOURSITE/SiteAssets/Jquery/jquery-1.9.0.min.js"></script> 
<script src="/Yoursite/SiteAssets/Jquery/jquery.SPServices-0.7.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () 
{ 
    $().SPServices.SPCascadeDropdowns( 
{ 
    relationshipList: "{55BD6A4A-1FE8-4C76-8D74-9C6C226D6B9B}",  //GUID Of The list Your Looking Up your Value In
    relationshipListParentColumn: "SiteCollName", //Column Name Your Looking Your Value Up From
    relationshipListChildColumn: "ConcName",   //Column Which Contains Data Your Want To Return
    parentColumn: "SiteCollName",  //Your Lookup Value For Above
    childColumn: "SiteContType",  //Where you want to put it in your new list
    debug: true 
}); 

$().SPServices.SPCascadeDropdowns( 
{ 
    relationshipList: "{6C6BE1C7-DB19-4CB0-9862-5107C19C588E}",  //GUID Of The list Your Looking Up your Value In
    relationshipListParentColumn: "ConcName", //Column Name Your Looking Your Value Up From
    relationshipListChildColumn: "Title",   //Column Which Contains Data Your Want To Return
    parentColumn: "SiteContType",  //Your Lookup Value For Above
    childColumn: "SiteContName",  //Where you want to put it in your new list
    debug: true 
});

}); 
</script>