如何用Rails/Hotwire/Turbo/Stimulus实现二级下拉菜单联动？

模型与数据说明 #

我是Rails和Hotwire/Turbo/Stimulus的新手，目前有三个关联模型：races（赛事）、point_structures（积分规则）和results（成绩）。每条race记录通过point_structure_id关联对应的积分规则，不同积分规则的名次积分设置如下：

积分规则（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 # 该规则仅提供完赛积分选项

赛事（races）示例数据 #

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

需求 #

希望创建一个表单，用户从下拉菜单选择赛事后，第二个下拉菜单能根据所选赛事对应的point_structure_id动态填充对应的积分选项。尝试过其他方案但未成功，需要基于Rails和Hotwire/Turbo/Stimulus完成该功能。

现有表单代码 #

# _form.rb

<form>
  <!-- data-controller="race-selector" 是后来添加的 -->
  <select data-race-selector-target="race" data-action="change->race-selector#updatePoints" data-controller="race-selector" class="form-group form-select mb-3">
    <!-- 赛事选项 -->
    <option value="">选择赛事</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">
    <!-- 积分下拉菜单将在此处填充 -->
  </div>
  <input type="submit" value="提交" class='btn btn-secondary'>
</form>

内容的提问来源于stack exchange，提问作者joelga