If you do not need to get data from the server, you can get the job done with Stimulus controller
You can check this great tutorial Dynamic forms with Stimulus, you can also get the source code on GitHub to dive deeper.
The key point is:
First, our controller loops through the form’s
fieldset elements, marking any element with a [name] attribute that matches the
<input type="radio"></input> element’s [name] as disabled. We’re relying on the field_name view helper to consistently generate matching [name] attributes.
Then, the controller reads the changed
<input type="radio"></input> element’s name and aria-controls attributes. If it finds a
fieldset element whose [id] attribute is referenced by the element’s [aria-controls] attribute, the controller removes the [disabled] attribute. We’re relying on the field_id view helper to consistently generate matching [id] and [aria-controls] attributes.
If you want the Select option values changed based on the previous Select value, we can do in this way.
Let's assume we want to auto update
State select based on the
- We wrap the
Stateselect in a specific
- We can create a Stimulus controller to handle the
changeevent of the
- If country select value changed, we build search params and send GET request to the server
- The server filter the
Stateoptions based on the
Countryvalue, and return the form back.
- Turbo frame will replace the
Stateselect with the new one
You can check Dynamic forms with Turbo to see how it works.