I'm working on a material design web-app designed for a mobile/touch environment.
Obviously I have tight space constrains and would like to know what is the best-practice for conditionally providing a sub-set of options.
I don't really like the idea of showing two selects only when the appropriate option is selected.
Option 05 (only this has the "sub-options" i.e. [sub1, sub2, sub3, sub4, sub5])
More info about the context: these are a sort of preferences... options in this case are different kinds of visualizations but the option number five has a more detailed visualization divided by areas.
(Thanks @cyberspark I don't know how to thank you for edit)
can you provide a bit more input here? I'm missing the context of the options. For example, if you have a date range it is good practice to show a start and end date in the same dropdown. Because there pointing out a period. So, in that case, I would use one drop-down, however, if there is a relation let see a subcategory. It makes more sense to have 2 different dropdowns...
For showing the input options(depending on the context) it could be possible to use the native device/os select options. But not sure if that is possible in your case.
If I am understanding you correctly then I don't think there is a need to display multiple dropdowns on the UI at the same time.
What I would suggest would be displaying your main dropdown (e.g. Options 1-5) first, then when a selection was made from this dropdown replacing the entire dropdown with the subset of options.
You then provide a "back" button to go back up to the previous set of options.
This way you can have as many levels of dropdowns as needed and you keep using the same amount of screen space.
If you were to take this approach I'd also suggest using some kind of breadcrumbs titling for the dropdowns so the user can keep track of the levels they are on e.g. "Primary options > Option 2 > Option 2-c > Option 2-c-1"