forms - What are some ways to visually communicate hierarchy between two different select elements?

The use case having two input elements, in which second select input depends on the first one; so when first one is updated, options on the second changes.

Conceptually; both of these elements are pretty technical to understand, so initially it is not clear that one of them depends on the other.

A common pattern I can think of; is to have the second select input disabled until an option from the first one is selected, but in my case both of the input elements must have options selected by default.

What are some subtle visual approaches I can use to communicate this, before resorting to explicitly explaining it with microcopy?

Answer

Luke Wroblewski has done a lot of research on web forms.This article on dependent dropdowns would probably answer this question more fully for you.

He breaks selection dependency into a few different visual displays: page display, tabs (section and finger), section selectors, and exposing with radio buttons (below, within, inactive, and groups).

Depending on use and complexity, I prefer the exposing options within radio buttons after selection.

Hope this gives you enough options.