1

我正在尝试制作一个以 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 %>

应用程序.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在 theProductGradesController和 theVendorsController

产品等级控制器

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

供应商控制器

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 查询等很陌生，所以我确定我在那里做错了什么，但是有什么想法吗？谢谢！！

4

1 回答 1

0

好的，所以对于以后遇到类似问题的任何人，我实际上最终采取了不同的路线......

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

这只是根据上一个下拉菜单中的选择启用/禁用下拉选项。如果您的下拉列表中填充了大量数据库数据，或者您需要在下拉列表中显示的内容上有一个安全层，这将不是一个很好的解决方案，因为选项是从 DOM 中添加/删除的，这意味着通过查看源代码，某人很容易看到所有数据。

HomeOnRails 博客有一篇很棒的文章，介绍了如何将这个 jQuery 链式插件集成到您的 rails 应用程序中。(http://homeonrails.blogspot.com/2012/01/rails-31-linked-dropdown-cascading.html)

享受和好运！

于 2012-08-24T17:08:50.323 回答