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

Question

I'm trying to adjust a form so that when the value of the top 'Competition' collection_select is changed, the available values for 'Home Team' and 'Away Team' change to show just those teams in that competition (ie competition.teams). The app itself is working as I expect it to, this is just something I want to add in for usability.

I've been reading through multiple posts around this question and all of them suggest using Javascript/AJAX (not my strong point), but there seems to be different ways of doing it with regards to routes, controllers, partials etc.

Any pointers or help that can be provided will be most appreciated!

_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

So after some more searching I came across a blog article from someone wanting to do the same thing. In the article it mentioned a RailsCasts video that addressed this subject.

After watching the video I've now made the following changes and the form is now doing exactly what I wanted!

I don't know if this is the best solution, but it seems fairly clean. I'm option to suggestions on improvements.

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