How to build a dependent dropdown in SharePoint

The Country → State → City cascade pattern. Three lookup fields, ten lines of f365 JavaScript, done in under five minutes.

A reader-friendly summary of the dependent-dropdown recipe, the most-asked SharePoint forms question on the internet. The official version lives in our docs at Common pattern: dependent dropdowns; this post tells the story.

The scenario

You have a form with three dropdowns: Country, State, and City. When the user picks "Australia", the State dropdown should filter to just Australian states. When they pick "Victoria", the City dropdown should filter to just Victorian cities.

Out of the box, SharePoint can't do this. Each lookup independently shows every item in its target list. So if you have 500 cities globally, you're picking through all 500 of them, even after you've already said "Victoria".

The solution

Three SharePoint lists with a foreign-key chain:

Countries, Title
States, Title, Country (Lookup → Countries)
Cities, Title, State (Lookup → States)

Three Lookup fields on the form, one per level. Then ten lines of JavaScript in the form's code drawer:

Cascade Country → State → City

f365.events.onChange('Country', (countryId) => {
  const state = f365.field('State').asLookup();
  state.filter = countryId ? `CountryId eq ${countryId}` : '';
  state.value = null;

  f365.field('City').value = null;
  f365.field('City').asLookup().filter = '';
});

f365.events.onChange('State', (stateId) => {
  const city = f365.field('City').asLookup();
  city.filter = stateId ? `StateId eq ${stateId}` : '';
  city.value = null;
});

That's the entire recipe. Save, publish, done.

What's happening

The Lookup field's typed handle has a filter property that accepts an OData $filter clause. Whatever the user just picked in the parent dropdown becomes part of the child's filter. Setting value = null clears any stale selection so the user starts fresh.

The same pattern chains to any depth, onChange of City sets the Suburb's filter, and so on.

Common variations

Pre-select the parent on a new form: in onLoad, default Country to the user's region. The cascade still works.
Source data outside SharePoint: use f365.http.get(...) in onChange to fetch options from an external API.
Cascading choice (not lookup) fields: the same onChange pattern, with .options = [...] instead of .filter = ....

What it looks like

A picture is worth a thousand words, but we don't have one yet, the form's behaviour is dynamic and a still frame doesn't do it justice. Try the

5-minute quickstart and build it yourself; you'll see it in action.