Say I have this scenario. 3 Libraries - 1) Orders 2) Suppliers 3) Containers

In the Orders I can choose "Supplier" and "Container" which are look up fields, looking into the 'Title' column of the "Suppliers" and "Containers" libraries, respectively.

Now Let's say in Order X, I choose supplier: SupplierA.

I want to only be able to choose containers of that supplier.

Possible starting points:

a) In the Containers' library I have a look up field "Supplier" looking into the same Suppliers library, so the logic would be, show all the containers which have the same RelatedSupplier.


b) The name 'SupplierA' always appears within the Title of the container, so the logic would be, show all the containers where the Title contains the name of the supplier.

What would be the best way to achieve this? Javascript would probably need to be used unless there is a SharePoint way that I don't know about. I would appreciate a starting point.

I am working in a SharePoint Online environment.

3 Answers 3


What you are trying to achieve here is cascading dropdowns i.e. based on the first dropdown, another dropdown value changes.

In order to achieve this, i'll prefer to configure my source to support cascading (in short the option A you mentioned).

In you Containers list add a lookup column of Supplier list. So you can find on the bases of Supplier what containers can be selected. Since you are using SPO environment, either REST API or JSOM can be used. For REST API you have to use filter in query string to get desired result, while in JSOM you can build the CAML Query object.

Also in your Order list since both Supplier as well as Containers are lookup column, you just need to bind them with ID.

  • Where would Rest API or JSOM be used exactly? Do you know of any article where I can find an example? Jun 8, 2017 at 13:29
  • Do you have a custom form? If not than cascading dropdown is not possible directly into SP OOTB forms. For OOTB forms you may require lot of workaround. If you dont want build the complete UI for forms, than InfoPath form can come handy. Jun 8, 2017 at 13:51
  • I am using the New and Edit forms of SharePoint which I guess are the same as what you refer to SP OOTB forms. Could there be some way to do this using pure Javascript or Jquery? Jun 8, 2017 at 15:57
  • Its just an approach, and I havent tried it yet. But you can try adding a script editor web part on New and Edit form. Write js code to get all the container based on supplier selected and hide all the elements in container which are not part of search result. The only problem I see here, whenever you post request to server it cross check for state of element it posted and what is returned to it. So hiding an element may not work. But its worth giving a try. Jun 9, 2017 at 7:04

I managed to solve this issue by using the SPServices tool.

In essence, a lookup to the Suppliers library is first added to the Containers content type.

JQuery and the SPServices utility are loaded in the master page from CDN (make sure there are no other versions of JQuery loading afterwards as there will be a conflict).

Finally, in the EditForm.aspx of the 'Orders' library, the 'SPServices.SPCascadeDropdowns' function is configured with the list and column properties defining the relationship between 'Suppliers' and 'Containers' and set to run within the (document).ready function.

And voila! Within the 'Orders' library, the 'Containers' lookup field only shows containers assigned (in the Containers library) to the supplier currently selected in the 'Suppliers' lookup field.

I followed this Tutorial and it works just fine!


Good day, I am able to get a list to cascade if it is one to one IE State then city. But what if you want two fields to combaine for the filter

enter image description here

So in the roster page, I want the user to select the section, then the payscale, then in the thrid dropdown it would only show pay times that were in that section at the selected payscale.

So if I selected IT, and payscale 2, the dropdown list would only have DBA and Dev level 2.

I tried this but it should all level 2 pay titles:

<script src="/jQuery-v3.3.1.min.js"></script>
<script src="/SPServices.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

            relationshipList: "LU_GRADE",
            relationshipListParentColumn: "BRANCH",
            relationshipListChildColumn: "Title",
            parentColumn: "BRANCH",
            childColumn: "GRADE",
            debug: true

            relationshipList: "LU_RANK",
            relationshipListParentColumn: "GRADE",
            relationshipListChildColumn: "Title",
            parentColumn: "GRADE",
            childColumn: "RANK",
            debug: true

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.