# HELP: Rails / Ajax with 3 Drop down lists (see code)

**URL:** <https://www.ruby-forum.com/t/help-rails-ajax-with-3-drop-down-lists-see-code/56301>\
**Category:** Rails\
**Created:** [March 30, 2006, 1:05am UTC](https://www.ruby-forum.com/t/help-rails-ajax-with-3-drop-down-lists-see-code/56301 "2006-03-30T01:05:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JCJCJC](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/e495f1/32.png) [@JCJCJC](https://www.ruby-forum.com/u/JCJCJC)\
**Post date:** [March 30, 2006, 1:05am UTC](https://www.ruby-forum.com/t/help-rails-ajax-with-3-drop-down-lists-see-code/56301/1 "2006-03-30T01:05:02Z")

</div>

Hi All,  
I have successfully implemented a two tier drop down lost with rails.  
However I’m stumped on how to make a third tier. For example: The form  
has three select lists; Catagory, Subcatagory and Make

User Experience Desired:

1. On page load a Catagory Select List shows a list of Catagories from  
the database. example:  
Portable Electronincs  
Laptops  
etc.

2. Upon select of Catagory (above) subcatagory select list is updated  

Digital Camera  
MP3 Player  
etc…

1. Upon select of Subcatagory (above) Make select list is updated  
  
Apple  
Creative labs  
Sony  
etc.

I have Catagories and Subcatagories complete using an observer (see  
below.) However I cannot get a second observer to trigger on the  
subcatagory selection. Is it a DOM issue? Is the Subcatagory select list  
once filled identified by some other name?

-JC

The code thus far:

THE CONTROLLER

def lookup\_subcats  
@subcatagories =  
Subcatagory.find\_all\_by\_catagory\_id(@params[:catagory\_id]).collect  
{|subc| [subc.subcatagory, subc.id]}  
render :inline =\> “\<%= select ‘tag’, ‘subcatagory\_id’,  
@subcatagories, {:selected =\> @subcat\_count } %\>”  
end

def lookup\_makes  
@subcat = (@params[:subcatagory\_id])  
@makes = @subcat.makes.find\_all\_by\_make\_id.collect {|m| [m.make,  
m.id]}  
render :inline =\> “\<%= select ‘tag’, ‘make\_id’, @makes, {:prompt =\>  
true } %\>”  
end

THE FORM:

\<%= select 'tag', 'catagory\_id', @catagory\_list, {:selected =\> 13 } %\>

 \<%= select 'tag', 'subcatagory\_id', { :Subcatagory =\> 'disabled' } %\>

 \<%= select 'tag', 'make\_id', { :Make =\> 'disabled' } %\>

\<%= observe\_field(  
:tag\_catagory\_id,  
:update =\> :subcatagory\_container,  
:url =\> { :action =\> :lookup\_subcats },  
:with =\> “‘catagory\_id=’+escape(value)”) %\>

\<%= observe\_field(  
:tag\_subcatagory\_id,  
:update =\> :make\_container,  
:url =\> { :action =\> :lookup\_makes },  
:with =\> “‘subcatagory\_id=’+escape(value)”) %\>

---

<div class="post-metadata">

**Author:** ![JCJCJC](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/e495f1/32.png) [@JCJCJC](https://www.ruby-forum.com/u/JCJCJC)\
**Post date:** [March 30, 2006, 1:10am UTC](https://www.ruby-forum.com/t/help-rails-ajax-with-3-drop-down-lists-see-code/56301/2 "2006-03-30T01:10:13Z")

</div>

Additional note for those looking at the code…(and other curious  
newbie like me)  
The relationship between subcatagories and makes is many-to-many. This  
is because HP or Canon for example is a make that can be found in many  
subcatagories.

---

<div class="post-metadata">

**Author:** ![JCJCJC](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/e495f1/32.png) [@JCJCJC](https://www.ruby-forum.com/u/JCJCJC)\
**Post date:** [March 30, 2006, 2:26am UTC](https://www.ruby-forum.com/t/help-rails-ajax-with-3-drop-down-lists-see-code/56301/3 "2006-03-30T02:26:13Z")

</div>

JC wrote:

> Additional note for those looking at the code…(and other curious  
> newbie like me)  
> The relationship between subcatagories and makes is many-to-many. This  
> is because HP or Canon for example is a make that can be found in many  
> subcatagories.

Is there a DOM browser or doc I can read on Prototype?

---

<div class="post-metadata">

**Author:** ![JCJCJC](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/e495f1/32.png) [@JCJCJC](https://www.ruby-forum.com/u/JCJCJC)\
**Post date:** [March 30, 2006, 11:22am UTC](https://www.ruby-forum.com/t/help-rails-ajax-with-3-drop-down-lists-see-code/56301/4 "2006-03-30T11:22:38Z")

</div>

JC wrote:

> 

The docs that I use are here:

> **[Using prototype.js v1.5.0](https://www.sergiopereira.com/articles/prototype.js.html)**
>
> Prototype.js documentation

---

<div class="post-metadata">

**Author:** ![JCJCJC](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/e495f1/32.png) [@JCJCJC](https://www.ruby-forum.com/u/JCJCJC)\
**Post date:** [March 30, 2006, 11:34am UTC](https://www.ruby-forum.com/t/help-rails-ajax-with-3-drop-down-lists-see-code/56301/5 "2006-03-30T11:34:47Z")

</div>

I tried to implement something similar but I found that it doesnt work  
in IE  
at all.

IE does not support writing the innerHTML to a select box, so any ajax  
call  
to populate a select box does not do anything.

If you come up with a way to overcome this I would be interested.

Cheers