Last night I was looking for a solution that would allow me to easily create a setup of related select boxes. I needed 3 of them to be exact. You know the ones that always seem to pop-up from time to time where the contents of one select box are populated after selecting a value on the first select box.

I started googling for a solution and came across a Rails plugin called related_select_forms that was written by Dimitrij Denissenko back in 2007. I figured "what the heck" it looks easy enough. Well after installing it from the svn repo on google code and setting up my initial form fields, I was welcomed by a plethora of errors. So I started digging into the plugin to find the issues and ended up fixing everything so that it now works with Rails 2.3.2.

I sent an email to Dimitrij asking about the status of the plugin but I havent heard back from him as of yet. I created a GitHub repo for the plugin to allow me to share my fixes with everyone. It can be found here:

http://github.com/russjohnson/related_select_forms/tree/master

Let me take just a second to show you how easy it was for me to create 3 related select boxes in my form with this plugin.

Consider the following models:

class Metro < ActiveRecord::Base

   has_many :areas

end

class Area < ActiveRecord::Base

   belongs_to :metro

   has_many :neighborhoods

end

class Neighborhood < ActiveRecord::Base

   belongs_to :area

end

Just looking at the models it should be plain to see how the selects should be related. You must first select a Metro, then that will populate the Areas. Once you select the area, that will populate the Neighborhoods.

Normally this would take a lot of handwritten Javascript to accomplish. And I know there are probably some super simple jQuery plugins for this thing, but this application is using the standard Prototype/Scriptaculous combo that ships with Rails.

So here is the how simple the form fields are using the plugin.

<p>
<%= f.label :metro_id, '', :class => 'title' %>
   <%= f.collection_select :metro_id, Metro.find(:all, :order => "name"), :id, :name, :include_blank => true %>
</p>
<p>
<%= f.label :area_id, '', :class => 'title' %>
<%= related_collection_select(:sales_contact, :area_id, [:sales_contact_metro, :id], Area.find(:all,:order => "area" ), :id, :area, :metro_id) %>
</p>
<p>
<%= f.label :neighborhood_id, '', :class => "title" %>
<%= related_collection_select(:sales_contact, :neighborhood_id, [:sales_contact_area, :id], Neighborhood.find(:all,:order => "title"), :id, :title, :area_id) %>
</p>

Notice the first select is a standard collection_select then for each related field. We make calls to the plugin. The method signature is very similar to the standard collection_select with the addition of a couple parent related arguments.

Super simple!

If you have any improvements or additions, feel free to fork the repo and send me a pull request.