Setting Select values dynamically

Hi,
I am a retool newbie.
I have two Select components, say, select1, select2
I set select1 to have values and labels to be ['car', 'bird']
I need select2 to dynamically populate to:

  1. if 'car' is selected in select1, set the values and labels of select2 to ['Ford', 'Acura', 'Audi']
  2. if 'bird' is selected in select1, set the values and labels of select2 to ['pigeon', 'crow', 'sparrow']

How can I do this?
Thanks for any responses!

Hi there @floyd,

Welcome to the forum!

There are many ways of achieving this, and I think one major factor is how your data is structured and being queried.

In any case, the way I would approach it is by adding a filter to the data source used in the select 2 component, something like {{myquery.data.filter (x =>x.category === select1.value}}}

This means that myquery contains all of your data, whether they are cars or birds. If that is simply not possible, then it gets more complex, and you would have different options, use a terniary to decide which data source is being used, or simply have 2 select components that hide/show depending on the category selected on select1.

Hope that makes sense, if it doesn't, please do share more around your data structure and queries.

Thanks Miguel. Good point about filtering the data. But, I think I have a more basic problem -for the Mobile version, the data source for Select component does not seem to accept a query data source, or even some javascript. I tried both, but it shows errors. It seems to want only an array. Of course I maybe doing this all wrong.

The other thing I tried was the change the event handler of the Select1 to set the values and labels in Select2 using 'Control Component', 'Run script' options but that didnt work either...the Control Component only allows to change the value, i.e setValue method; not the entire array of values or the labels