import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["parent", "child"]
static values = {
options: Object,
url: String
}
connect() {
this.updateChild()
}
async updateChild() {
const parentValue = this.parentTarget.value
if (!parentValue) {
this.childTarget.innerHTML = '<option value="">Select parent first</option>'
this.childTarget.disabled = true
return
}
let options
if (this.hasUrlValue) {
// Fetch from server
const response = await fetch(`${this.urlValue}?parent_id=${parentValue}`)
options = await response.json()
} else {
// Use embedded data
options = this.optionsValue[parentValue] || []
}
this.childTarget.innerHTML = '<option value="">Select...</option>' +
options.map(opt => `<option value="${opt.id}">${opt.name}</option>`).join('')
this.childTarget.disabled = false
}
}
<%= form_with model: @post, data: {
controller: "dependent-select",
dependent_select_options_value: @categories_by_parent.to_json
} do |f| %>
<div class="form-group">
<%= f.label :parent_category_id, "Category" %>
<%= f.select :parent_category_id,
options_for_select(@parent_categories.map { |c| [c.name, c.id] }, @post.parent_category_id),
{ include_blank: "Select a category" },
{
class: "form-select",
data: {
dependent_select_target: "parent",
action: "change->dependent-select#updateChild"
}
} %>
</div>
<div class="form-group">
<%= f.label :category_id, "Subcategory" %>
<%= f.select :category_id,
[],
{ include_blank: "Select parent first" },
{
class: "form-select",
data: { dependent_select_target: "child" },
disabled: @post.parent_category_id.blank?
} %>
</div>
<%= f.submit class: "btn btn-primary" %>
<% end %>
Dependent dropdowns are a classic UX pattern where one select populates based on another's value. With Stimulus, I handle this entirely client-side after the initial page load by storing options as data attributes or fetching them via AJAX. When the parent select changes, the controller filters or fetches options for the child select. This keeps forms responsive without server round-trips for every interaction. I use data-<controller>-<value-name>-value to pass available options as JSON from the server. For large datasets, I switch to fetching options via fetch() to a JSON endpoint. The pattern extends to any cascading form field scenario: country → state → city, category → subcategory, etc.
