Rails 5 - 根据先前的 collection_select 更改 collection_select 的表单值答案

【问题标题】：Rails 5 - Change form value of a collection_select based on a previous collection_selectRails 5 - 根据先前的 collection_select 更改 collection_select 的表单值
【发布时间】：2019-12-12 10:34:04
【问题描述】：

我正在尝试调整表格，以便当顶部“比赛”collection_select 的值发生更改时，“主队”和“客队”的可用值会更改为仅显示该比赛中的那些球队（即比赛.团队）。该应用程序本身正在按我的预期工作，这只是我想添加的东西以提高可用性。

我一直在阅读有关此问题的多篇文章，所有文章都建议使用 Javascript/AJAX（不是我的强项），但在路由、控制器、部分等方面似乎有不同的方法。

任何可以提供的指针或帮助将不胜感激！

_form.html.erb：

<div class="col-md-6 offset-md-3">
  <%= form_for(@game, url: yield(:form_url)) do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    <div class="form-group">
      <%= f.label :competition, class: 'control-label' %>
      <%= f.collection_select :competition_id, Competition.order(:name),:opta_id,:name, class: 'form-control' %>
    </div>

    <div class="form-group">
      <%= f.label :home_team_id, class: 'control-label' %>
      <%= f.collection_select :home_team_id, Team.order(:name),:opta_id,:name, class: 'form-control' %>
    </div>

    <div class="form-group">
      <%= f.label :away_team_id, class: 'control-label' %>
      <%= f.collection_select :away_team_id, Team.order(:name),:opta_id,:name, class: 'form-control' %>
    </div>

    <%= f.submit yield(:button_text), class: "btn btn-primary" %>
  <% end %>
</div>

【问题讨论】：

标签： javascript ruby-on-rails

【解决方案1】：

所以经过更多搜索后，我遇到了一个想要做同样事情的人的blog article。在文章中它提到了一个解决这个问题的RailsCasts video。

观看视频后，我现在进行了以下更改，表单现在完全符合我的要求！

我不知道这是否是最好的解决方案，但它看起来相当干净。我可以选择改进建议。

_form.htm.erb：

<div class="col-md-6 offset-md-3">
  <%= form_for(@game, url: yield(:form_url)) do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    <div class="form-group">
      <%= f.label :competition, class: 'control-label' %>
      <%= f.collection_select :competition_id, Competition.order(:name),:opta_id,:name, include_blank: true, class: 'form-control' %>
    </div>

    <div class="form-group">
      <%= f.label :home_team_id, class: 'control-label' %>
      <%= f.grouped_collection_select :home_team_id, Competition.order(:name), :teams, :name, :opta_id,:name, include_blank: true %>
    </div>

    <div class="form-group">
      <%= f.label :away_team_id, class: 'control-label' %>
      <%= f.grouped_collection_select :away_team_id, Competition.order(:name), :teams, :name, :opta_id,:name, include_blank: true %>
    </div>

    <%= f.submit yield(:button_text), class: "btn btn-primary" %>
  <% end %>
</div>

games.coffee：

jQuery ->
  $('#game_home_team_id').parent().hide()
  $('#game_away_team_id').parent().hide()
  home_teams = $('#game_home_team_id').html()
  away_teams = $('#game_away_team_id').html()
  $('#game_competition_id').change ->
    competition = $('#game_competition_id :selected').text()
    escaped_competition = competition.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
    home_options = $(home_teams).filter("optgroup[label='#{escaped_competition}']").html()
    away_options = $(away_teams).filter("optgroup[label='#{escaped_competition}']").html()
    if home_options || away_options
      $('#game_home_team_id').html(home_options)
      $('#game_home_team_id').parent().show()
      $('#game_away_team_id').html(away_options)
      $('#game_away_team_id').parent().show()
    else
      $('#game_home_team_id').empty()
      $('#game_away_team_id').empty()

【讨论】：