How do I populate a second dropdown menu based on the selection of the first dropdown menu with Rails/Hotwire/Turbo/Stimulus?

Question

I'm a newbie to Rails and Hotwire/Turbo/Stimulus.

I have a three models related to this question: "races", "point_structures", and "results".

Each record in the race table has one "point_structure_id" associated with it, and each of the three possible point_structures has different point values for "first_place", "second_place", "third_place", and "finished".

Here are the point_structures:

id:1, first_place: 26, second_place: 24, third_place: 22, finished: 20

id:2, first_place: 13, second_place: 12, third_place: 11, finished: 10

id:3,  finished: 10 # This is the only option for this point_structure

The race table has many races in it and here's an example of a record:

id: 1, name: 'Farmland 5k', date: '2024-12-05', location 'Traverse City' point_structure_id: 1

id: 2, name: 'Run for a Cause 5k', date: '2024-07-05, location 'Detroit' point_structure_id: 2

I am trying to create a form where users select a race from a dropdown menu, and based on what race is selected (and therefore what point_structure_id the race has), a second dropdown menu will populate below with the correct point options for the user to choose.

I'm happy to provide additional code or context as needed. Thanks in advance.

I've cobbled together attempts at this based on suggestions elsewhere, but none have worked. I'd like to do this with Rails and Hotwire/Turbo/Stimulus.

Here's one attempt at the form

# _form.rb

<form>
  <!-- data-controller="race-selector" below was added after the fact -->
  <select data-race-selector-target="race" data-action="change->race-selector#updatePoints" data-controller="race-selector" class="form-group form-select mb-3">
    <!-- Options for races -->
    <option value="">Choose a Race</option>
    <% @races.each do |race| %>
      <option value="<%= race.id %>" id="<%= race.point_structure_id %>"><%= race.date.to_s + ' - ' + race.name + ' - ' + race.location %></option>
    <% end %>
  </select>


  <div id="points" name="points" class="form-group form-select mb-3">
    <!-- Points dropdown will be populated here -->
  </div>
  <input type="submit" value="Submit" class='btn btn-secondary'>
</form>