Dynamic Dropdown Help Please

[Jas]

• Goal: I want select2 to change depending on select1, dynamically. I am very inexperienced with retool generally so not sure how this works

• Steps: I have a query called roleList (image below). Choose Category select has it's values set. Choose a role then pulls the roles depending on the values from from choose a category, but this only works when I specifically run the query - I need it to work dynamically.

• Details:

// Create a mapping object for categories and roles
const rolesByCategory = {
  "Accounting": ["AR", "AP", "Billing", "Bookkeeping", "Accounting", "Payroll", "Revenue Ops", "Tax"],
  "Customer Support": ["Customer Success", "Customer Support", "Customer Service", "Technical Support", "Helpdesk (T1/2)", "Travel Agent", "Executive Assistant"],
  "Data Handling": ["Data Entry Specialist", "Document Control Specialist", "Quality Assurance/Control"],
  "HR and Recruitment": ["Executive Assistant", "Office Administrator"],
  "IT and Design": ["Systems Administrator"],
  "Marketing": ["Social Media", "Growth Marketing", "Email Marketing", "Marketing", "SEO Manager", "Copywriter", "Content Writer"],
  "Operations": ["Project Manager", "Operations Associate", "Logistics Associate", "Supply Chain Associate", "Procurement Associate", "Delivery Manager"]
};

// Get the selected category from your category dropdown component
const selectedCategory = select1.value; // Ensure selectCategory matches the ID of your category dropdown component

// Return the roles for the selected category, or an empty array if no category is selected
return rolesByCategory[selectedCategory] || [];

• Screenshots:

Please help!

[MiguelOrtiz]

Hi there @Jas,

I think you;re almost there, try adding {{item}} to both your "Value" and "Label" within your select 1 mapping.

This should make your js query work.

Also, there are other ways of achieving this, I recently did this short tutorial which hopefully can be of further guidance

Dynamic select components. Filter a dropdown based on the value of another one. Retool tutorial

[Jas]

Thanks for your reply! I saw the video but I couldn't get this method with the id to work, it kept saying there were undefined and I'm not sure how to define them in retool.

Also -- can you please explain what you mean by adding item? Is this adding to the mapping of 1 or 2? Is there a way I can share my file with you - I think that can help explain what might be going wrong.

Thank you

[MiguelOrtiz]

Hey @Jas,

So you've done the mapping well in your select1, but you haven't defined your dropdown options

So in these two fields, you can just write {{ item }}, which it will basically go through each element of the array and use the referred value as both value and label

[Jas]

Also how do you set up the queries on the left? Can you show that, maybe I can use that to help me

[Jas]

The categories are fine in image 1, but in image 2 it still doesn't flow down to change dynamically.

I have tried both select1.item and select1.data -- I'm very sorry! Just genuinely not sure how this works haha

[MiguelOrtiz]

Hey @Jas,

In your second screenshot it seems the dropdown is not populated because the array is empty, this is a logical consequence of the first select dropdown not having a value.

Also, you have to make sure your JS triggers every time a value is selceted in select1, so you should add an event handler on your select 1 so that it triggers the query on Change

[Jas]

I added this but it didn't do anything --

I am very confused pls help I don't understand why this is so difficult

[Jas]

Says "no options"

[Steven_W]

What happens if you click on the blue run button (top left). What’s the output when select1 has value?

[MiguelOrtiz]

Hey @Jas,

Sorry to hear you're struggling with this. I'll try to break it down further.

1. When you map a select component using a data source, you need to define which values from within the selected data source will be taken by the mapped options to define the values and the labels. As such, you could have a data source that looks like this:

[{"id":1,"name":apple},
"id":2"name":orange},
"id":3"name":pear}]

Now, within all your mapped options, when you use {{ item }} you are referring to the arrays in your data source, in the above case, each array has id and name as values, so I can refer to item.id and item.name. What this will do, is go through all of your arrays and return a list of options, with values and labels based on each array found in your data source.

In your case, you have a data source called rollList, with a simple object with a list of values, e.g.

[ "Executive Assistant", "Office Administrator"]

As such, when you use {{ item }}, as there are no keys in your values, it will automatically create a list with those two. As such, you can put {{ item }} in both your value and label.

Finally, I can see yo uadded the trigger event in your select2 component, but you need to add it to your select 1 component, so that it triggers your rollList and it returns a data source that yoru select 2 component will use to create all of hte options.

So, having said the above, whaat you need to change is:

1. Write {{ item }} in both your Value and Label settings within your select2 component
2. Add the event handler in yoru select 1 component, so that the roleList updates everytime a value is selected in component 1.

Hope this helps clarify!

[Jas]

Hey Miguel -- I've now given it a couple more attempts and still no luck:

I've added the event handler for Select 1 (image 1) and also added the {{ item }} in both the Value and Label of the select2 component (image 2).

However -- the output does now change independent of me needing to click run.

As in when I choose a category, the left does change (image 3 and 4)

This output happens automatically now. But I still consistently have "no options" (image 5).

Think I'm nearly there -- not sure what's going wrong from here!

[Jas]

Now that I've implemented the event handler, it runs on category change and outputs the role list, but select 2 still does not change.

[MiguelOrtiz]

Hey @Jas,

I think I know were the culprit is. You need to reference the actual data of the javascript query, i.e.

{{ roleList.data }}

Without the data, you're referring to the whole query with all of its properties and information.