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 from the inner list of SelectedSpecies.Breed.

These examples showcases it with two different approaches.

Separate Objects - This approach has two separate list. One for species and one for breeds. Click to View
Nested Objects - This approach the first dropdown contains the options of the second list.

Which Method to Chose?

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.

Dependant Drop downs (Nested)

Nested Object Example