Rails4动态选择下拉列表

时间:2016-08-01 21:29:59

标签: ruby-on-rails collections model-associations

我正在尝试使用form_tag在搜索表单中设置一些动态下拉选择菜单。我想要的是与Railcasts #88

中的示例类似的功能

型号:

class Count < ActiveRecord::Base
  belongs_to :host
end

class Host < ActiveRecord::Base
  belongs_to :site
  has_many   :counts
end

class Site < ActiveRecord::Base
  belongs_to :state
  has_many   :hosts
end

class State < ActiveRecord::Base
  has_many :sites
end

查看:

<%= form_tag(counts_path, :method => "get", id: "search-form") do %>
  <%= select_tag "state_id", options_from_collection_for_select(State.all.order(:name), :id, :name) %>
  <%= select_tag "site_id", options_from_collection_for_select(Site.all.order(:name), :id, :name) %>
<% end %>

一个州拥有多个拥有许多计数的主机的网站。或者相反,Counts belongs_to Host thats belongs_to Site属于State

所以我想从州下拉列表中选择一个状态,然后根据他们通过主机关联的状态对网站进行“分组”。

我一直在努力解决这个嵌套关联,似乎无法弄清楚如何构建groups_collection_select。

我知道我忽略了一些显而易见的事情!可以肯定使用一些指针...

1 个答案:

答案 0 :(得分:3)

您可以触发jquery-ajax请求。第一个选择框中的更改事件将调用控制器上的操作,被调用的方法将通过ajax调用更改第二个下拉列表的值。简单的例子:

在您的视图文件中:

<%= select_tag 'state_id', options_for_select(State.all.order(:name), :id, :name) %>

<%= select_tag "site_id", options_for_select(Site.all.order(:name), :id, :name) %>

在该控制器的JS文件中:

$(document).on('ready page:load', function () {
 $('#state_id').change(function(event){
      $("#site_id").attr('disabled', 'disabled')          
      $.ajax({
     type:'post',
     url:'/NameOfController/NameOfMethod',
     data:{ state_id: $(this).val() },
     dataType:"script"
   });
  event.stopImmediatePropagation();
});

});

在NameOfController.rb

def NameOfMethod
  ##no need to write anything
end

在NameOfMethod.js.erb

<% if params[:state_id].present? %>
   $("#site_id").html("<%= escape_javascript(render(partial: 'site_dropdown'))%>")
<% end %>
_site_dropdown.html.erb文件中的

<% if params[:state_id].present? %>
   <%= select_tag 'site_id', options_for_select(Site.where("state_id = ?", params[:state_id])) %>
<% else %>
   <%= select_tag "site_id", options_for_select(Site.all.order(:name), :id, :name) %>

因此,它会根据选定的州下拉菜单更改网站下拉列表。您可以进行多个级别的搜索。祝你好运。