If these are strictly dependent on each other, perhaps expand the first unselected category automatically so that the user doesn't have to click into it, scroll to their item, and select it.
After selection1, that element can be collapsed into a single select menu as you currently have in your design. The collapsed select menu can still be modified if the user needs to fix an error.
download bmml source – Wireframes created with Balsamiq Mockups
1: Specific interaction and implementation details: The method of expansion I'm suggesting here is modifying the
size attribute on the
<select> element. I'd recommend disabling unpopulated
select elements until its preceeding
select item is blurred. This way the user isn't distracted by the element collapsing while they may still be working on it. Toggling the
size attribute on blur would keep the form elements in order in the DOM and only affect their presentation, so navigating with the keyboard should work as expected. For example, a user clicks or tabs into the first
select item, makes their selection, then when they tab into or click the next field, the first is collapsed, and the second expands. Testing should be conducted for how this behaves on a mobile device.