passive-yellow•13mo ago

Cascading Dropdown Example

Hey everyone! Say I want to do a cascading dropdown inside of my Refine app, where I have "Brand" and "Model" concerning cars in this example. I select the Brand "Tesla (87)" which then should be passed as an extra argument (?) to the second select. Inside of the second select I have a resource attached that should now be ... filtered? ... by the input of the first select. Nothing that immediately needs help, I'm just (again) scratching my idea inside here, since I didn't find anything related in the docs and maybe you guys already have a good way of solving this (maybe using meta?).

3 Replies

kapa.ai•13mo ago

Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you might find it helpful to look at the documentation on how to use the useSelect hook in refine. This hook can be used to populate the props of the <Select> component, and it might be possible to use it in a way that allows you to filter the options of the second select based on the value of the first select. Here is an example of how to use the useSelect hook:

const { selectProps: categorySelectProps } = useSelect<ICategory>({  
 resource: "categories",  
 optionLabel: "title",  
 optionValue: "id",  
});  
  
<Select {...categorySelectProps} />;

const { selectProps: categorySelectProps } = useSelect<ICategory>({  
 resource: "categories",  
 optionLabel: "title",  
 optionValue: "id",  
});  
  
<Select {...categorySelectProps} />;

You can find more information about this in the refine documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below

passive-yellow•13mo ago

Oh there actually is a way to pass information (even adjust headers) using the meta option: https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/#meta Includes a nice example, that should do it 👍

useSelect | refine

useSelect hook allows you to manage Ant Design's `` component when the records in a resource needs to be used as select options.