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

Question

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

我一直在阅读围绕这个问题的多篇文章，并且所有文章都建议使用 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>

Answer 1

因此，经过更多搜索后，我发现了一篇博客文章，该文章来自想要做同样事情的人。 在文章中，它提到了讨论这个主题的RailsCasts 视频。

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

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

_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>

游戏.咖啡：

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()