新表单上有2个id字段(@module_info_id (id1)和@module_action_id (id2))。id1和id2都是表单上带有:collection的下拉菜单。选择id1时,根据id1的输入填充id2。当选择id2时,则根据id2的输入填充2个文本框。这里是新的。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;
});
});
在change event of selects使用jquery填充第二个select和两个文本字段,如下所示:
当第一次选择change:
$('#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");
}
当第二次select更改时:
$('#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
});