3. Selects (Dropdowns)

The select HTML element is one of the most commonly used in UX development, allowing users to select from a predetermined list of options. ASP.NET Core developer may also refer to the element as a dropdown, a holdover from the ASP.NET WebForm era. Regardless of what you call them, they are fantastic.

One of the most common patterns with select elements is cascading selects. The general idea is that a selection in one component affects the visible values in another. Stay around in web development long enough, and you'll likely have to implement this pattern. With HTMX, you can accomplish the described behavior with a few attributes and an ASP.NET Core endpoint.

Instead of returning all the results of the select elements and filtering them on the client, we can lean on ASP.NET Core to perform the complex logic and only return the required information.

Hint: to accomplish this, you'll need to add hx-get on both select dropdowns. You can also complete this sample by revealing each dropdown as values are selected. Experiment and to see what feels more natural.