Cannot find a way to add set of values to a Select option (dropdown)

App Building
1

I cannot seem to populate a Select component. These value are set based on the value from the previous select option when opted by the user. Searched all around the documentation but could not find a working way to set list of values to the dropdown Select.
Tried even populating a temporary state to a JSON, a Javascript query returning a JSON array, and using them as the data source. Nothing worked?
Is this component only usable with mapping?

To keep it simple...
How do i populate a dynamic set of values like these to a Select dropdown?
From the below set the Select should be populated with KEY1 and KEY2, and sometimes with KEY2 and KEY3.
KEY1 - Value1
KEY2 - Value2
KEY3 - Value3

Adding some more information. This Select is in a Listbox so I cannot use a single variable for different records in the list.

2

Hey @anoopshankaran!

Assuming each select has a different set of options, the most flexible thing I'm thinking of to accomplish this is to pass a full set of configurations for each select component in a single query:

const colors = { label: "Colors", options: ["Purple", "Orange", "Red"] };
const selectedColor = select1[0].value;

const shapes = {
  label: "Shapes",
  options: {
    Purple: ["Square", "Circle"],
    Orange: ["Circle", "Triangle"],
    Red: ["Square", "Triangle"],
  }[selectedColor],
};

return [colors, shapes];

You can then get those configurations using i:

With that you get:

It sounds like you may have already considered this option, does it seem like it could work?

4 Likes
3

@Kabirdas, thanks for the fast response. Sorry, this is all new to me, being from a completely different software background, but where should the above JSON code be in? I tried adding it to JS Query, JS Transformer and a Query on JSON but nothing seemed to populate the Select options correctly. For a JS Query and Transformer, I get these errors - "The selected data source is empty or could not be converted to an array.". After several attempts, i see something when using a JS Transformer and a Query JSON with SQL on top of it using {{ SELECT * FROM JSTransformer.value }}, but i see only {{ item[0] }}and {{ item[1] }}to map to the Value and Label, and the dropdown now only shows 'Shapes' and 'options' as the values.
Sorry, but can you please explain the dropdown settings to me, step by step?

PS: Thanks for the logic for the filtering dropdown2 with dropdown1 values! That is great to use further!

4

@anoopshankaran it should work in a JS query!

A couple of things to look out for is that you have the query set to run on page load:

1430×388 77.6 KB

And that you have it set as the change event handler on your select component:

490×524 55.2 KB

I've attached the example app used above so you can import and play around with it!
dynamic-selects.json

5

Thanks for the responses, @Kabirdas. I checked this a bit the last week and getting the hang of how to use it.
My scenario is something like this.
image
The Activity dropdown will be populated from a database table query and it'll have fixed values. No problem with that. The Function dropdown will be populated dynamically, from another table query, based on what the Activity dropdown is selected to. This happens for each horizontal line (added with the '+' button above).
I'll use the line index in the code logic that you sent above and see if I can get it to do that.

6

Thank you, @Kabirdas, for the great help. Everything works now!

7