Dependent Select with StimulusJS

categories_controller.rb

class CategoriesController < ApplicationController
  def fields
    render json: Field.where(category_id: params[:id]).order(:id)
  end
end

dependent_select_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "source", "target" ];

  handleSelectChange() {
    this.populateSelect(this.sourceTarget.value);
  }

  populateSelect(sourceId, targetId = null) {
    fetch(`/${this.data.get('sourceRoutePart')}/${sourceId}/${this.data.get('targetRoutePart')}`, {
      credentials: 'same-origin'
    })
      .then(response => response.json())
      .then(data => {
        const selectBox = this.targetTarget;
        selectBox.innerHTML = '';
        data.forEach(item => {
          const opt = document.createElement('option');
          opt.value = item.id;
          opt.innerHTML = item[this.data.get('displayAttribute')];
          opt.selected = parseInt(targetId) === item.id;
          selectBox.appendChild(opt);
        });
      });
  }
}

new.html.slim

= simple_form_for @entry, wrapper: :horizontal_form do |f|
  .row
    .col-12.col-md-6
      #fields-wrapper[data-controller="dependent-select" data-dependent-select-display-attribute="title" data-dependent-select-source-route-part="categories" data-dependent-select-target-route-part="fields"]
        .row.mb-3
          .col
            = select_tag :category, options_from_collection_for_select(Project.order(:name), :id, :name), class: 'form-control', data: {target: 'dependent-select.source', action: 'dependent-select#handleSelectChange'}, prompt: 'Please select...'
          .col
            = f.input :field_id, as: :select, input_html: {data: {target: 'dependent-select.target'}}, label: false   
  = f.button :submit

routes.rb

Rails.application.routes.draw do
  resources :categories do
    member do
      get :fields
    end
  end
end