Question

我正在尝试制作一个以3个选择下拉菜单开头的表单。很标准 -

The selection of drop down 1 populates the options in drop down 2

然后，

The selection of drop down 2 populates the options in drop down 3

我已经按照sled对这里的类似问题的回答https://stackoverflow.com/a/6864321/766817但我无法弄清楚（使用他的例子），如何在混合中添加第三个元素。这是我到目前为止所拥有的......

_form.html.erb

<%= select_tag  :first_select,
("<option>Product Grade...</option>" + options_from_collection_for_select(@product_grades, "id", "product_grade")).html_safe,
  :'data-remote' => 'true',
  :'data-url' => url_for(:controller => 'product_grades', :action => 'getdata'), 
  :'data-type' => 'json'
%>

<%= select_tag  :second_select,
  :'data-remote' => 'true',
  :'data-url' => url_for(:controller => 'vendors', :action => 'getdata'), 
  :'data-type' => 'json'
%>

<%= select_tag :third_select %>

的application.js

$('#first_select').live('ajax:success', function(evt, data, status, xhr) {

  var selectbox2 = $('#second_select');

  selectbox2.empty();

  $.each(data, function(index, value) {
    var opt = $('<option/>');

    opt.attr('value', value[0]);
    opt.text(value[1]);
    opt.appendTo(selectbox2);
  });
});


$('#second_select').live('ajax:success', function(evt, data, status, xhr) {

  var selectbox3 = $('#third_select');

  selectbox3.empty();

  $.each(data, function(index, value) {
    var opt = $('<option/>');
    opt.attr('value', value[0]);
    opt.text(value[1]);
    opt.appendTo(selectbox3);
  });
});

最后，我在getdata和ProductGradesController

中都有VendorsController次操作

ProductGradesController

def getdata
  @data_from_select1 = params[:first_select]
  @data_for_select2 = Vendor.where(:product_grade_id => @data_from_select1).all
  render :json => @data_for_select2.map{|c| [c.id, c.vendor_name]}
end

VendorsController

def getdata
  @data_from_select2 = params[:second_select]
  @data_for_select3 = ItemCode.where(:vendor_id => @data_from_select2).all
  render :json => @data_for_select3.map{|a| [a.id, a.item_code]}
end

目前，前两个步骤有效，但第三步产生一个选择框，但是当您从前两个步骤中选择一个选项时，没有数据填充它。

我是jQuery AJAX查询的新手，所以我确信我在那里做错了，但是有什么想法吗？谢谢！

Answer 1

好的，对于今后遇到类似问题的人来说，我实际上最终选择了不同的路线......

这些下拉列表将处理的数据量不会太多，所以我实际上将一个非AJAX方法与一个名为jQuery Chained的jQuery插件集成在一起（https://github.com / tuupola / jquery_chained）

这只是根据前一个下拉列表中的选择启用/禁用下拉选项。如果您的下拉列表中包含大量数据库数据，或者如果您需要在下拉列表中显示安全层，那么这将不是一个非常好的解决方案，因为选项被添加/删除DOM，意味着通过查看源代码，人们很容易看到所有数据。

HomeOnRails博客有一篇关于如何将这个jQuery Chained插件集成到rails应用程序中的精彩帖子。（http://homeonrails.blogspot.com/2012/01/rails-31-linked-dropdown-cascading.html）

享受并祝你好运！

在Rails中创建一个由3部分组成的AJAX选择表单

1 个答案: