Skip to main content
saimoulikrishnak293956
February 17, 2026
Question

Is it possible to achieve multiple selection in cascading dropdowns

  • February 17, 2026
  • 3 replies
  • 0 views

I have a requirement where I'm having 5 dropdowns, based on the values (Multiple Selection) in first dropdown, the remaining dropdown values need get auto filtered out (Cascading Dropdowns). Is it possible to achieve? The one way of implementing is after multiple selections in first dropdown we need to keep a button and on click of button we can pass to next dropdowns. But without having button is it possible to achieve.

3 replies

stefanhelzle0001
February 17, 2026

Did you consider to apply that "pass to next" logic inside the saveinto of the first dropdown?

shubhama926776
February 17, 2026

Sample code for reference

a!localVariables(
  /* Sample hierarchical data: Adjust to your data source */
  local!lv1Labels: {"Cat1", "Cat2", "Cat3"},
  local!lv1Values: {1, 2, 3},
  local!lv2Labels: {"1-A", "1-B", "2-A", "2-B", "3-A", "3-B"},
  local!lv2Values: {11,12,21,22,31,32},
  local!lv3Labels: {"11-i","11-ii","12-i","21-i","22-i","31-i"},
  local!lv3Values: {111,112,121,211,221,311},
  local!lv4Labels: {"111-a","111-b","121-a","211-a","311-a"},
  local!lv4Values: {1111,1112,1211,2111,3111},
  local!lv5Labels: {"1111-x","1111-y","1211-x","2111-x"},
  local!lv5Values: {11111,11112,12111,21111},

  local!selected1: {}, local!selected2: {}, local!selected3: {},
  local!selected4: {}, local!selected5: {},
  local!tmp2Labels: {}, local!tmp2Values: {},
  local!tmp3Labels: {}, local!tmp3Values: {},
  local!tmp4Labels: {}, local!tmp4Values: {},
  local!tmp5Labels: {}, local!tmp5Values: {},
{
  /* Level 1 */
  a!multipleDropdownField(
    label: "Level 1",
    choiceLabels: local!lv1Labels, choiceValues: local!lv1Values,
    value: local!selected1,
    saveInto: {
      local!selected1,
      /* Clear children */
      a!save(local!selected2, {}), a!save(local!selected3, {}), a!save(local!selected4, {}), a!save(local!selected5, {}),
      /* Filter L2 */
      a!save(local!tmp2Labels, index(local!lv2Labels, wherecontains(local!selected1, local!lv1Values), {})),
      a!save(local!tmp2Values, index(local!lv2Values, wherecontains(local!selected1, local!lv1Values), {}))
    }
  ),

  /* Level 2 */
  a!multipleDropdownField(
    label: "Level 2",
    choiceLabels: if(length(local!tmp2Labels)>0, local!tmp2Labels, local!lv2Labels),
    choiceValues: if(length(local!tmp2Values)>0, local!tmp2Values, local!lv2Values),
    value: local!selected2,
    saveInto: {
      local!selected2,
      /* Clear children */
      a!save(local!selected3, {}), a!save(local!selected4, {}), a!save(local!selected5, {}),
      /* Filter L3 based on L2 */
      a!save(local!tmp3Labels, index(local!lv3Labels, wherecontains(local!selected2, local!lv2Values), {})),
      a!save(local!tmp3Values, index(local!lv3Values, wherecontains(local!selected2, local!lv2Values), {}))
    }
  ),

  /* Level 3 */
  a!multipleDropdownField(
    label: "Level 3",
    choiceLabels: if(length(local!tmp3Labels)>0, local!tmp3Labels, local!lv3Labels),
    choiceValues: if(length(local!tmp3Values)>0, local!tmp3Values, local!lv3Values),
    value: local!selected3,
    saveInto: {
      local!selected3,
      a!save(local!selected4, {}), a!save(local!selected5, {}),
      a!save(local!tmp4Labels, index(local!lv4Labels, wherecontains(local!selected3, local!lv3Values), {})),
      a!save(local!tmp4Values, index(local!lv4Values, wherecontains(local!selected3, local!lv3Values), {}))
    }
  ),

  /* Level 4 */
  a!multipleDropdownField(
    label: "Level 4",
    choiceLabels: if(length(local!tmp4Labels)>0, local!tmp4Labels, local!lv4Labels),
    choiceValues: if(length(local!tmp4Values)>0, local!tmp4Values, local!lv4Values),
    value: local!selected4,
    saveInto: {
      local!selected4,
      a!save(local!selected5, {}),
      a!save(local!tmp5Labels, index(local!lv5Labels, wherecontains(local!selected4, local!lv4Values), {})),
      a!save(local!tmp5Values, index(local!lv5Values, wherecontains(local!selected4, local!lv4Values), {}))
    }
  ),

  /* Level 5 */
  a!multipleDropdownField(
    label: "Level 5",
    choiceLabels: if(length(local!tmp5Labels)>0, local!tmp5Labels, local!lv5Labels),
    choiceValues: if(length(local!tmp5Values)>0, local!tmp5Values, local!lv5Values),
    value: local!selected5,
    saveInto: local!selected5
  ),

  /* Debug: Selected values */
  a!textField(
    value: local!selected1 & "|" & local!selected2 & "|" & local!selected3 & "|" & local!selected4 & "|" & local!selected5,
    label: "Selected: ",
    readOnly: true
    )
}

)

harshm4411
February 18, 2026

Hi [mention:d3f7da62bd4c4db4bc3402f1a67e7747:e9ed411860ed4f2ba0265705b8793d05] ,

Here is an example of multiple selection using cascading dropdowns.

a!localVariables(
  local!countries: { "India", "USA" },
  local!statesByCountry: {
    "India": { "Rajasthan", "Maharashtra" },
    "USA": { "California", "Texas" }
  },
  local!citiesByState: {
    "Rajasthan": { "Jaipur", "Udaipur" },
    "Maharashtra": { "Mumbai", "Pune" },
    "California": { "Los Angeles", "San Francisco" },
    "Texas": { "Houston", "Dallas" }
  },
  local!areasByCity: {
    "Jaipur": {
      "Malviya Nagar",
      "Vaishali Nagar",
      "Mansarovar"
    },
    "Udaipur": {
      "Hiran Magri",
      "Fatehpura",
      "Shobhagpura"
    },
    "Mumbai": { "Andheri", "Bandra", "Dadar" },
    "Pune": { "Wakad", "Hinjewadi", "Kothrud" },
    "Los Angeles": { "Hollywood", "Venice", "Beverly Hills" },
    "San Francisco": { "Mission District", "SoMa", "Sunset" },
    "Houston": { "Downtown", "Midtown", "Uptown" },
    "Dallas": { "Deep Ellum", "Bishop Arts", "Lakewood" }
  },
  local!selectedCountry,
  local!selectedState,
  local!selectedCities,
  local!selectedArea,
  local!showSelectedChoiceforState: touniformstring(
    a!forEach(
      items: local!selectedCountry,
      expression: index(local!statesByCountry, fv!item, {})
    )
  ),
  local!showSelectedChoiceforCity: touniformstring(
    a!forEach(
      items: local!selectedState,
      expression: index(local!citiesByState, fv!item, {})
    )
  ),
  local!showSelectedChoiceforArea: touniformstring(
    a!forEach(
      items: local!selectedCities,
      expression: index(local!areasByCity, fv!item, {})
    )
  ),
  {
    a!multipleDropdownField(
      label: "Country",
      choiceLabels: local!countries,
      choiceValues: local!countries,
      value: local!selectedCountry,
      saveInto: {
        local!selectedCountry,
        a!save(
          {
            local!selectedArea,
            local!selectedCities,
            local!selectedState
          },
          null
        )
      }
    ),
    a!multipleDropdownField(
      label: "State",
      choiceLabels: local!showSelectedChoiceforState,
      choiceValues: local!showSelectedChoiceforState,
      value: local!selectedState,
      saveInto: {
        local!selectedState,
        a!save(
          {
            local!selectedArea,
            local!selectedCities
          },
          null
        )
      }
    ),
    a!multipleDropdownField(
      label: "City",
      choiceLabels: local!showSelectedChoiceforCity,
      choiceValues: local!showSelectedChoiceforCity,
      value: local!selectedCities,
      saveInto: {
        local!selectedCities,
        a!save(local!selectedArea, null)
      }
    ),
    a!multipleDropdownField(
      label: "Area",
      choiceLabels: local!showSelectedChoiceforArea,
      choiceValues: local!showSelectedChoiceforArea,
      value: local!selectedArea,
      saveInto: { local!selectedArea }
    )
  }
)