javascript erb 69 lines · 2 tabs

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.

Related snips

ruby

class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

System test: asserting Turbo Stream responses

rails hotwire turbo

by codesnips 4 tabs

ruby

class Post < ApplicationRecord
  belongs_to :author, class_name: 'User'
  has_many :comments, dependent: :destroy

  scope :published, -> { where.not(published_at: nil).where('published_at <= ?', Time.current) }
  scope :draft, -> { where(published_at: nil) }

ActiveRecord scopes for reusable query logic

rails activerecord patterns

by Alex Kumar 1 tab

ruby

module Api
  module V1
    class UsersController < BaseController
      def show
        user = User.includes(:profile).find(params[:id])

ETags for conditional requests and caching

rails caching http-caching

by Alex Kumar 1 tab

ruby

class PostsController < ApplicationController
  def index
    @posts = Post.includes(:author)
                 .order(created_at: :desc)
                 .page(params[:page])
                 .per(10)

Turbo Frames: infinite scroll with lazy-loading frame

rails turbo hotwire

by codesnips 4 tabs

ruby

require "csv"

class PeopleCsvStream
  include Enumerable

  HEADERS = %w[id full_name email signed_up_at plan].freeze

Resilient CSV Export as a Streamed Response

rails performance streaming

by codesnips 3 tabs

erb

<form data-controller="query-sync" data-action="change->query-sync#apply">
  <select name="status" class="rounded border p-2">
    <option value="">Any</option>
    <option value="open">Open</option>
    <option value="closed">Closed</option>
  </select>

Filter UI that syncs query params via Stimulus (no front-end router)

rails hotwire stimulus

by Henry Kim 2 tabs

Share this code

Here's the card — post it anywhere.

Stimulus controller for dependent select dropdowns — share card

Link copied