Creating a dynamic collection select rails 3.1

Question

I have gone through N number of solutions for creating a dynamic dropdown in rails but nothing seems to work.

I have a typical state and city model and I do not want to use carmen.

Here is my model :-

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

City.rb

class City < ActiveRecord::Base
    attr_accessible :city

    belongs_to :market

    has_and_belongs_to_many :users

end

in devise/registrations/new (I want the user to select the state and city at the time of signup itself)

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

_cities.html.haml partial

-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

I want the city list to change once the user selects a state and be populated with relevant cities.

How can I achieve this?

Answer 1

You must use ajax for this in your view which contains the state dropdown:

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

This calls your action, and substitutes the content of your div to the new dropdown for cities.

To your partial:

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

With this, you don't need to add the :f => f parameter when rendering the partial.

You should add an id (I am assuming "stateDropdown") to your dropdown in the html_option part.

Answer 2

One more tutorial which was really helpfull and I guess will help anyone looking to implement dependent dropdown is http://www.petermac.com/rails-3-jquery-and-multi-select-dependencies/