Rails4动态选择下拉菜单 [英] Rails4 Dynamic Select Dropdown

问题描述

我正在尝试使用form_tag在搜索表单中设置一些动态的下拉菜单。我想要的功能类似于在＃88铁路

型号：

  class Count< ActiveRecord :: Base 
 Emirates_to：host 
 end 
 
 class Host< ActiveRecord :: Base 
属于：站点
 has_many：计数
结束
 
类Site< ActiveRecord :: Base 
属于：state 
 has_many：hosts 
 end 
 
 class State< ActiveRecord :: Base 
 has_many：sites 
 end 
  

视图：

 <％= form_tag（counts_path，：method => get，id： search-form）做％> 
<％= 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％> 
  

一个州has_many站点has_many拥有许多计数的主机。或反过来，将 commit_to主机属于州的网站计数为

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

我一直在为这个嵌套的关联而苦苦挣扎，似乎无法弄清楚如何构建grouped_collection_select。

我知道我正在忽略一些明显的东西！一定可以使用一些指针...

解决方案

您可以触发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 
 ##无需编写任何内容
结束
  

在NameOfMethod.js.erb中

 <％如果params [：state_id] .present？ ％> 
 $（＃site_id）。html（<％= escape_javascript（render（partial：’site_dropdown'））％>））
<％end％> _site_dropdown.html.erb文件中的
  

：

<如果参数[：state_id] .present是pre> <％？ ％>
<％= 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）％>


因此它将根据所选状态下拉列表更改站点下拉列表。您最多可以搜索n个级别。祝你好运。

I am trying to set up some dynamic Dropdown Select Menus in a Search Form using form_tag. What I would like is similar functionality to the example found at Railcasts #88

Models:

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

View:

<%= 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 %>

A State has_many Sites which has_many Hosts which has many Counts. Or conversely, Counts belong_to Host whichs belongs_to Site which belongs to State

So I would like to select a state from the States dropdown that would then "group" the Sites based on the state they associate through the Host.

I have struggled with this nested association and can't seem to figure out how build the grouped_collection_select.

I know I'm overlooking something obvious! Could sure use some pointers...

解决方案

You can fire jquery-ajax request. Change event in first select box will call action on controller and called method will change the value of second dropdown through ajax call. Simple example:

In your view file:

<%= 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) %>

In JS file of that controller:

$(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();
});

});

In NameOfController.rb

def NameOfMethod
  ##no need to write anything
end

In NameOfMethod.js.erb

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

in _site_dropdown.html.erb file:

<% 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) %>

So it will change site dropdown based on selected state dropdown. You can go upto n number of level for searching. Good luck.

这篇关于Rails4动态选择下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！