Stimulus controller for dependent select dropdowns

Jordan Lee Jan 2026

2 tabs

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 %>

2 files · javascript, erb Explain with highlit

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.