Cascading Drop down in SharePoint Online

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/195644

Question

enter image description here

I'm trying to implement cascading drop down for list in SharePoint online I have 3 different list with name Countries , States, cities. and the master list Address in which I have Fields Country , State, City.

I'm trying to display Sates for selected country. and City for selected States in SharePoint Online list

Was it helpful?

Solution

You can do Cascading dropdown using SPServices library.

Try this below code:

Just add jquery-1.8.2.js and jquery.SPServices-0.7.2.min.js into style library and give proper source link in below code.

<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery.SPServices-0.7.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "State",
    relationshipListParentColumn: "Country",    
    relationshipListChildColumn: "Title",
    parentColumn: "Country",
    childColumn: "State",
    debug: true
  });
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "City",
    relationshipListParentColumn: "State", 
    relationshipListChildColumn: "Title",       
    relationshipListSortColumn: "ID",
    parentColumn: "State",
    childColumn: "City"
  });
});
</script>

Get more reference from below links:

You can also achieve this using REST api. More info in this link.

Try below code:

<script src="//code.jquery.com/jquery-1.10.1.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: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('"+params.childList+
                "')/items?$select=Id,"+params.childLookupField+","+params.parentFieldInChildList+
                "/Id&$expand="+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>

OTHER TIPS

There is no such OOTB functinality.I have used SPservices SPCascadeDropdowns api.

Following is the link

https://spservices.codeplex.com/wikipage?title=%24().SPServices.SPCascadeDropdowns&referringTitle=Documentation

Hope it helps..

3 Level Cascading drop down SharePoint step by step using jquery. https://youtu.be/yBytlB1yTtM

I used the REST api give in this page, and it works great for the new form (Thank you so much, exactly what i was looking for)

However I want to use the same functionality for the edit form as well. Tried the same script and it does not work. ( No Error message- ) Any suggestions on how to achieve this with edit form.

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top