在Rails 3.2中，如何在相同的表單上有2個鏈式ajax調用？

Question

在新表單上有2個id字段（@module_info_id（id1）和@module_action_id（id2））。 id1和id2都是下拉菜單，在表單上帶有：collection。 選擇id1時，將根據id1的輸入填充id2。 選擇id2后，將根據id2的輸入填充2個文本框。 這是new.js.erb：

<% if @module_info_id > 0 %>  #id1
  $('#user_access_module_action_id').empty();
  $('#user_access_module_action_id').append('<option value=""></option>');
  <% @module_actions.each do |r| %>
    $('#user_access_module_action_id').append('<option value="<%=r.id%>"><%= "##{r.id},"+ ' ' + "#{r.name}," + ' ' + "#{r.data_resource.name}" %></option>');
  <% end %> 
<% end %>
<% if @module_action_id > 0 %>  #id2
  <% module_action = OnboardDataUploadx.module_action_class.find_by_id(@module_action_id) %>
  $('#user_access_action').val('<%=module_action.name%>');
  $('#user_access_resource').val("<%=module_action.data_resource.name%>");
<% end %>

問題在於，當更改id2時，ajax將執行id1循環並刪除對id2的選擇。 控制器沒有id1的內存，並且不知道id1是否已更改。 更改id2時，將執行id1的循環。 當更改了id2時，有什么方法可以跳過對id1的循環執行？

觸發更改的jQuery代碼為：

$(function (){
    $('#user_access_engine_id').change(function(){
      $.get(window.location, $('form').serialize(), null, "script");
      return false;
    });
});

$(function() {
  $('#user_access_module_action_id').change(function (){
    $.get(window.location, $('form').serialize(), null, "script");
    return false;
  });
});

Answer 1

填寫第二個選擇，並使用jquery在選擇的更改事件中填充兩個文本字段，如下所示：

第一次選擇更改時：

$('#user_access_engine_id').change(function(){
  var val = this.val();
  if(val != null){
    $('#user_access_module_action_id').empty();
    $('#user_access_module_action_id').append('<option value=""></option>');
    <% @module_actions.each do |r| %>
      $('#user_access_module_action_id').append('<option value="<%=r.id%>">
<%="##{r.id},"+ ' ' + "#{r.name}," + ' ' + "#{r.data_resource.name}" %></option>');
    <% end %>;
  }
  //refresh select related to its type
  //as example chosen-select as the following
  $('.chosen-select').trigger("chosen:updated");
}

當第二個選擇更改時：

$('#user_access_module_action_id').change(function (){
  var val = this.val();
  if(val != null){
    $('#user_access_module_action_id').append('<option value=""></option>');
  <% module_action = OnboardDataUploadx.module_action_class.find_by_id(@module_action_id) %>
    $('#user_access_action').val('<%=module_action.name%>');
    $('#user_access_resource').val("<%=module_action.data_resource.name%>");
  }
  //refresh select related to its type
});