new.html.erb

<div class="mx-auto px-4 sm:px-6 lg:px-8">
  <div class="flex flex-col sm:flex-row justify-between items-center my-6">
    <h1 class="text-2xl md:text-3xl text-center sm:text-left">New Appointment</h1>
  </div>

  <%= form_with(model: @appointment, url: appointments_path) do |form| %>
    <div
      data-controller="select"
      data-select-url-value="<%= countries_path %>"
      data-select-param-value="country_id"
    >
      <div class="grid gap-4">
        <div class="w-full">
          <%= form.label :country_id, class: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" %>
          <%= form.select :country_id, @medical_specializations, { include_blank: true },
                data: {
                  action: "change->select#change",
                },
                class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-600 focus:border-green-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
          %>
        </div>

        <div class="w-full" 
             data-select-url-value="<%= states_path %>"
             data-select-param-value="state_id"
        >
          <%= form.label :state_id, class: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" %>
          <%= form.select :state_id, [], { include_blank: true },
                data: {
                  select_target: "select"
                },
                required: true,
                class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-600 focus:border-green-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
          %>
        </div>
        
        <div class="w-full">
          <%= form.label :city_id, class: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" %>
          <%= form.select :city_id, [], { include_blank: true },
                data: {
                  select_target: "select"
                },
                required: true,
                class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-600 focus:border-green-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
          %>
        </div>
      </div>
    </div>

    <%= button_tag(type: 'submit', class: "inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-green-500 hover:bg-green-700 focus:ring focus:ring-green-300 text-white font-semibold rounded-lg shadow-md") do %>
      Create appointment
    <% end %>
  <% end %>
</div>

select_controller.js

import { Controller } from "@hotwired/stimulus"
import { get } from "@rails/request.js"

// Connects to data-controller="select"
export default class extends Controller {
  static targets = ["select"]
  static values = {
    url: String,
    param: String
  }

  change(event) {
    let params = new URLSearchParams()

    params.append(this.paramValue, event.target.selectedOptions[0].value)
    params.append("target", this.selectTarget.id)

    get(`${this.urlValue}?${params}`, {
      responseKind: "turbo-stream"
    })
  }
}