dropdown – Multiple drop-down lists based on conditions

Split the configuration into two parts: Conditions and Actions.

Each condition should be on a dedicated line (row). Provide the user buttons (or links) to be able to add additional conditions and remove existing ones.

Subsequent rows (after the first) should give the user the option for AND/OR, and depending on your requirements, you probably want to prevent the first condition from being removed.

Something like this:

enter image description here

If required, you could do similar logic for the “actions” and allow the user to add multiple actions.


Handling condition groups

If you want to provide a more in-depth design that supports grouping conditions, then you could do something like this where the user can add either a “condition” or a “group condition”.

enter image description here

As you can see, it starts to get complicated quite quickly, so you will need to decide if it’s worth the extra complexity or not.

In this example, you definitely want the user to be able to remove the first condition, because they may want to start with a “condition group” straight away.

And if you really wanted to go crazy, you could allow them add groups within groups!