创建动态集合选择 rails 3.1答案

【问题标题】：Creating a dynamic collection select rails 3.1创建动态集合选择 rails 3.1
【发布时间】：2012-05-28 19:48:04
【问题描述】：

我已经使用了 N 种在 Rails 中创建动态下拉列表的解决方案，但似乎没有任何效果。

我有一个典型的州和城市模型，我不想使用卡门。

这是我的模型：-

Market.rb

class Market < ActiveRecord::Base
    attr_accessible :state, :cities_attributes

    has_and_belongs_to_many :users

    has_many :cities, :dependent => :destroy

    accepts_nested_attributes_for :cities

    validates :state, :presence => true, :uniqueness => true

end

城市.rb

class City < ActiveRecord::Base
    attr_accessible :city

    belongs_to :market

    has_and_belongs_to_many :users

end

在设计/注册/新建（我希望用户在注册时选择州和城市）

%li
  =f.collection_select :city, Market.all,:id, :state, html_options = { :class => "custom_textarea"}
%li
 =render "devise/registrations/cities", :f => f

_cities.html.haml 部分

-unless cities.blank?
    =f.collection_select( :city, @cities, :id, :cities)

registrations_controller.rb

def update_city_select
    @cities = City.where(:country_id => params[:id])
    render :partial => "cities", :locals => {:cities => @cities}
end

我希望在用户选择一个州并填充相关城市后更改城市列表。

我怎样才能做到这一点？

【问题讨论】：

标签： ruby-on-rails jquery ruby-on-rails-3.1 cascadingdropdown

【解决方案1】：

您必须在包含状态下拉列表的视图中为此使用 ajax：

$("#stateDropdown").change(function(){
  $.get("controller/update_city_select.html?id="+$("#stateDropdown").val(), 
        function(data){ $("#cityDropdownDiv").html(data); } );
});

这会调用您的操作，并将 div 的内容替换为新的城市下拉列表。

给你的部分：

#cityDropdownDiv
    -unless @cities.blank?
        = collection_select( :market, :city, @cities, :id, :cities)

有了这个，渲染部分就不用加上:f => f参数了。

您应该在 html_option 部分的下拉列表中添加一个 id（我假设为“stateDropdown”）。

【讨论】：

我收到这个错误你有一个 nil 对象，但你没想到它！在这一行 =f.collection_select(:city, @cities, :id, :cities)
问题是你的城市部分没有表格。您可以使用一些解决方法来解决该问题。如果您需要，我可以在一小时内提供一个。
你能再看一遍吗？
我更正了一下，现在应该可以了。我尝试过这个。如果它仍然不起作用，请提供有关有问题的部分的更多信息。
我认为有问题的部分是 jquery 行 $.get("controller/update_city_select.html?id="+$("#stateDropdown").val(),

【解决方案2】：

另外一个非常有用的教程是http://www.petermac.com/rails-3-jquery-and-multi-select-dependencies/

【讨论】：