Javascript 根据rails中的第一个选择列表值更改第二个选择列表

在底部更新了答案代码

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

表格：

示例：用户选择另一个团队。工作人员选择选项将更新，以仅显示与所选团队关联的工作人员

我知道解决方案是使用javascript，但在rails环境中应用它时遇到了问题。我知道，但在将其应用于rails应用程序时仍有困难

代码

首先，向控制器发出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
    })
  });

接下来，在控制器内执行操作

这样，在成功回调ajax调用时，您将获得一个带有列表的JSON对象。因此，您需要清除工作人员选择并创建选项并附加到它

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

---

如您所见，我没有将创建选项的代码放在列表中，但是一个简单的搜索将有大量关于此的结果。想法很简单。

您好，我刚才遇到了同样的问题，您也可以共享JSON文件结构吗？@tmvnty JSON文件结构是什么意思？您将团队id和员工列表存储在哪里？我以为你用JSON做的，sry我还是个学习者，没问题。JSON请求通过routes.rb文件传递，该文件将请求发送到app/controllers/task_notes_controller.rb进行处理。这是它获取和存储所有员工记录的地方。视图中的选择框将使用app/assets/javascripts/task_notes.js中指定的代码进行更新那些想创建选项的人：var listitems=[]；$。eachdata，functionkey，值{listitems+=+value+；}$选择.appendlistitems；

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

});

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

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 call
success: function(data) {
  $("#staff_member_id").children().remove();
  // Create options and append to the list
}
// Rest of Ajax call