This week I will show you how to make dependent dropdowns with Hotwire!
I will use a toy app as an example. This app will have a page where addresses can be created. The address will consist of a country, a state, a city, and a postcode. Except for the postcode, we will have a list of options coming from the database and when the user selects the country, we load the states for the selected option. When the user selects the state we will load the cities in that state. Let’s start by generating a Rails app, the necessary models and a scaffold for the address:

carbon (11).png 552 KB

I already have an excerpt of a list of countries, states, and cities in the necessary yaml format, so I just moved those into the fixtures folder of the project and loaded them:

carbon (12).png 168 KB

We need to define the has_many associations on the Country and State model, and while we are there, let’s set a default scope to order them by name:

carbon (13).png 313 KB

In the view files, Rails generated text_field inputs for the associations, let’s convert all three to collection_select:

carbon (14).png 637 KB

We are getting to the fun part now. The goal is to submit the form when a country is selected, so the states field is populated with the appropriate ones. Let’s add a button underneath the country selector to see how this works:

carbon (21).png 275 KB

If you start the Rails app and click that “Select” button, it submits the form and the the states are loaded. But the whole form is reloaded on the screen, so you see the validation errors on the top. Imagine that this is part of a larger form, that would make this an even worse user experience. But don’t worry, there is turbo frames to the rescue. Let’s wrap the section we want to reload when this button is clicked into a turbo frame, and set the button to reload that frame only:

carbon (22).png 604 KB

If you reload the page and click the button again, it will only reload the frame with the three dropdowns. The next step is to trigger the reload on the change event of the select element. To achieve this, we can create a Stimulus controller:

carbon (23).png 123 KB

In the controller we need to set a target for the button and a function to trigger a click event when we call it:

carbon (24).png 331 KB

And we need to update our view to use this controller:

carbon (25).png 410 KB

We can also hide the button, since the user no longer needs to click it. And we need to change the markup for the state_id section too, and we will have a working dependent dropdown for the address fields.

If you look at the network tab of the browser, you can see that Rails still returns the markup for the whole page, but since we only need the form, we can at least discard the layout from rendering to gain a little performance improvement. To achieve this, we need to change the render line in the controller to not render the layout when the request format is turbo_frame:

carbon (26).png 652 KB

If you want to see the source code for the above example, it is on Github: https://github.com/gregmolnar/dependent-dropdown

That’s it for this week! Until next time!