Change second select list based on first select list value in rails

Question

Updated with answer code at bottom

For second select box, show select options for only those staff members associated to the selected team.

Form:

Example case: A user selects another team. The staff member select options updates to display only those staff members associated with that selected team.

I know the solution is with javascript, but I'm having trouble applying it within a rails environment. I am aware of this question but am still having trouble applying it to my rails app.

Code

#app/controllers/task_notes_controller.rb
...
def new
  @task_note = TaskNote.new
  @teams = Team.all.includes(:staff_members)
end
...

#app/views/task_notes/_form.html.erb
...
<%= select_tag('team', options_from_collection_for_select(@teams, :id, :name ) ) %>

<div class="field">
  <%= f.label :staff_member_id %><br>
  # Currently displays all staff members on every team, no matter what team is selected.
  <%= f.collection_select :staff_member_id, StaffMember.all, :id, :first_name %>
</div>
...

#app/assets/javascripts/task_notes.js
$(document).ready(function(){

  $("#team").on('change', function(){
      alert("The new team id is: " + $(this).val() ); 
      # The value (the id of the team) does update on selection option change.  
      # Now I need to specify that I want the select options for the staff members
      # select box to update and show only staff members with this team_id 
  });

});

hi i just ran into the same problem, can u also share the JSON file structure? — zenoh, Sep 10 '15 at 14:53
where did you store the list of team id and staff members? I thought you used JSON to do that, sry I'm still a learner. — zenoh, Sep 10 '15 at 16:22
No problem. The JSON request passes through the `routes.rb` file which shoots the request over to `#app/controllers/task_notes_controller.rb` for processing. That is where it grabs and stores all the `staff_member` records. The select box within the view updates with the code specified in `#app/assets/javascripts/task_notes.js` — Neil, Sep 10 '15 at 16:28

score 16 · Accepted Answer · answered Jul 24 '15 at 18:59

First you fire an ajax call to your controller. (Keep in mind that this url from the ajax call must exist in your routes).

$(document).ready(function() {
  $("#team").on('change', function(){
    $ajax({
      url: "populate_other_list",
      type: "GET",
      data: {team_id: $(this).val()},
      // Callbacks that will be explained
    })
  });

Next you make your action inside your controller.

def populate_other_list
  team_id = params[:team_id]
  @staff = Staff.find_by team_id: team_id
  respond_to do |format|
    format.json { render json: @staff }
  end
end

With this, on your success callback of your ajax call, you get a JSON object with your list. So you need to clear the staff select and create the options and append to it.

// Ajax call
success: function(data) {
  $("#staff_member_id").children().remove();
  // Create options and append to the list
}
// Rest of Ajax call

As you can see, i didn't put the code that create the options and put them inside the list, but a simple search will have plenty of results about this. The idea is simple though.

Those who are wondering to create options: var listitems = []; $.each(data,function(key, value) { listitems += ''; }); $("#select").append(listitems); — TheAshwaniK, Feb 26 '17 at 20:11

Change second select list based on first select list value in rails

1 Answers1

Linked