This example show cases how to make one drop down change the contents of the other.
It does this by listening to the @bind-SelectedItem:after event to update
the second drop down's Items by creating a new list of breeds via AllBreeds.
These examples showcases it with two different approaches.
- Separate Objects - This approach has two separate list. One for species and one for breeds.
- Nested Objects - This approach the first dropdown contains the options of the second list. Click to View
This is of course up to your data but I would only use Nested Objects if the data is more static and smaller nature. You could also use Nested Objects if the API or data source already gives back the data in this format.
I would use Separate Objects if I was querying an relational database where the data is already distinct. This approach increases network traffic but decreases the over memory footprint of the page.