在Rails中根据第一个选择列表的值改变第二个选择列表。

Question

底部附有答案代码

对于第二个选择框，仅显示与所选团队相关联的员工的选择选项。

表单：

  

---

示例案例：用户选择另一个团队。员工选择选项会更新以仅显示与所选团队相关联的那些员工。

我知道解决方案是使用JavaScript，但我在Rails环境中应用它时遇到了麻烦。我知道这个问题，但在我的Rails应用程序中仍然遇到了麻烦。

---

代码

#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 
  });

});

- Neil

---

嗨，我遇到了同样的问题，你能分享一下JSON文件结构吗？ - zenoh

@tmvnty，你是指JSON文件的结构是什么意思？ - Neil

你把团队ID和员工名单存储在哪里了？我记得你用JSON做的，抱歉我还是个学习者。 - zenoh

没有问题。JSON请求通过routes.rb文件传递，然后发送到#app/controllers/task_notes_controller.rb进行处理。那里获取并存储所有的staff_member记录。视图中的选择框将使用#app/assets/javascripts/task_notes.js中指定的代码进行更新。 - Neil

Answer 1

首先，您需要对您的控制器发起一个ajax调用。(请记住，这个ajax调用中的url必须存在于您的路由中。)

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

接下来，您需要在controller内部创建您的action。

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

这样，在您的ajax调用的success回调中，您会得到一个带有列表的JSON对象。因此，您需要清除staff选择并创建选项，并将其附加到其中。

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

正如您所看到的，我没有放置创建选项并将它们放入列表中的代码，但是简单的搜索将会有很多关于此的结果。不过，这个想法很简单。

- MurifoX

---

想要创建选项的人可以使用以下代码： var listitems = []; $.each(data,function(key, value) { listitems += '<option value="' + key+ '">' + value + '</option>'; });$("#select").append(listitems);该代码将遍历"data"中的每个元素，为每个元素创建一个<option>标签，并将其添加到id为"select"的<select>元素中。最终结果是一个包含所有选项的下拉菜单。 - TheAshwaniK