Programmers Blog

There are multiple solutions on the net for dynamic select menus. By saying “dynamic menus” I mean that we have a form with two select dropdowns. When we change the first one, the content of the second one is updated.

The most promising that I have found are:

1. http://railscasts.com/episodes/88-dynamic-select-menus

This one includes writing JS code. I don’t like writing JS code.

1. http://github.com/splendeo/dependent_select

This one does not use AJAX. It generates the whole thing in JS and sends it to the client. Can be useful when dealing with not big data.

1. http://pullmonkey.com/2008/3/30/dynamic-select-boxes-ruby-on-rails/

A very nice one but in my opinion a bit complicated for a beginner.

I had to develop my own solution. This is what I came up with. Lets assume we have a form for Foo model that has a select dropdown with Bar1 model and select dropdown with Bar2 model, that is dependent on Bar1 current selection.

1. In the Foo model form, add a field observer:

  <%= observe_field :foo_box1_id, :url => { :action => :box2_select_box },
      :update => :foo_box2_id,
      :with => :box1_id
      %>

1. In the FooController add:

  def box2_select_box
    @box1 = Box1.find(params[:box1_id]) unless params[:box1_id].empty?
    render :layout => false
  end

1. In the view for the above action (box2_select_box.html.erb) put:

<%=
if @box1
  options_from_collection_for_select(@box1.box2s, :id, :name)
else
  options_for_select([["Nothing to select", ""]])
end
%>

No JS code writing. Working with AJAX. Simple.

EDIT:
In reply to Rob Bean’s comment (thanks!) I attach a full rails project with a sample.

The “@box1.box2s” comes from models association. box1 has_many box2s (see box1.rb)