title: Change second select list based on first select list value in rails
body: <p><strong>Updated with answer code at bottom</strong></p>
  
  <p>For second select box, show select options for only those <code>staff members</code> associated to the selected <code>team</code>.</p>
  
  <p><strong>Form:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/jdaXM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jdaXM.png" alt="enter image description here"></a> &nbsp;&nbsp;</p>
  
  <hr>
  
  <p><strong>Example case</strong>: A user selects another team. The staff member select options updates to display only those staff members associated with that selected team.</p>
  
  <p><a href="https://i.stack.imgur.com/O8VDH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O8VDH.png" alt="enter image description here"></a></p>
  
  <p>I know the solution is with javascript, but I'm having trouble applying it within a rails environment. I am aware of <a href="https://stackoverflow.com/questions/10570904/use-jquery-to-change-a-second-select-list-based-on-the-first-select-list-option">this question</a> but am still having trouble applying it to my rails app.</p>
  
  <hr>
  
  <p><strong>Code</strong></p>
  
  <pre><code>#app/controllers/task_notes_controller.rb
  ...
  def new
    @task_note = TaskNote.new
    @teams = Team.all.includes(:staff_members)
  end
  ...
  </code></pre>
  
  <p><br></p>
  
  <pre><code>#app/views/task_notes/_form.html.erb
  ...
  &lt;%= select_tag('team', options_from_collection_for_select(@teams, :id, :name ) ) %&gt;
  
  &lt;div class="field"&gt;
    &lt;%= f.label :staff_member_id %&gt;&lt;br&gt;
    # Currently displays all staff members on every team, no matter what team is selected.
    &lt;%= f.collection_select :staff_member_id, StaffMember.all, :id, :first_name %&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p><br></p>
  
  <pre><code>#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 
    });
  
  });
  </code></pre>