# Drop-down list populating second drop-down via AJAX

**URL:** <https://www.ruby-forum.com/t/drop-down-list-populating-second-drop-down-via-ajax/48562>\
**Category:** Rails\
**Created:** [November 22, 2005, 4:45am UTC](https://www.ruby-forum.com/t/drop-down-list-populating-second-drop-down-via-ajax/48562 "2005-11-22T04:45:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dba](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/cdc98d/32.png) [@dba](https://www.ruby-forum.com/u/dba)\
**Post date:** [November 22, 2005, 4:45am UTC](https://www.ruby-forum.com/t/drop-down-list-populating-second-drop-down-via-ajax/48562/1 "2005-11-22T04:45:25Z")

</div>

Hi! The documentation is sparse, and my searches have turned up nothing  
yet. Perhaps someone has some insight? Is there a how-to on this? or  
what am I missing? 🙂

I have a web page with a drop-down list (high-level key like  
Company) that once chosen, should populate another

 item with a  
list of matching low-order keys (like Product). I have coded something,  
but it does not trigger the download of the second HTML snippet with the  
new select. (nothing in http log, javascript console, etc)
1. layout has \<%= javascript\_include\_tag “prototype” %\>

2. controller (call) has

3. inital view has

4. view for load\_contacts is  
\<%= options = [[" Select Contact", " "]]

5. Versions:  
rails-0.13.1  
actionpack-1.9.1  
Prototype 1.3.1  
Firefox 1.0.7 under Linux

---

<div class="post-metadata">

**Author:** ![dba](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/cdc98d/32.png) [@dba](https://www.ruby-forum.com/u/dba)\
**Post date:** [November 22, 2005, 5:53am UTC](https://www.ruby-forum.com/t/drop-down-list-populating-second-drop-down-via-ajax/48562/2 "2005-11-22T05:53:43Z")

</div>

I had to implement similar behavior and got stuck just like you did. I  
did  
implement a solution that is less than optimal but it works. Perhaps  
someone out  
there has a better solution.

The way I have solved this is in your ajax callback from the first combo  
list  
spew out the select html for the second based on the observer pattern.  
Thus when  
the user changes the selection on combo1 you can define a div in the  
original  
page which content will populated using the html block returned by the  
ajax  
callback.

In you callback you ‘compute’ something like that:

render\_text “\<select id='combo2\> \<option1…\> \<option2…\>…”

This makes it harder to style and maintain… But it does get the job  
done…

Hope this helps…

---

<div class="post-metadata">

**Author:** ![dba](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/cdc98d/32.png) [@dba](https://www.ruby-forum.com/u/dba)\
**Post date:** [November 22, 2005, 3:01pm UTC](https://www.ruby-forum.com/t/drop-down-list-populating-second-drop-down-via-ajax/48562/3 "2005-11-22T15:01:25Z")

</div>

The first parameter of observer\_field should be the id and not the name  
of  
the select  
So in your case it would have to be:  
observe\_field ‘call\_client\_id’

bogdan

---

<div class="post-metadata">

**Author:** ![dba](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/cdc98d/32.png) [@dba](https://www.ruby-forum.com/u/dba)\
**Post date:** [November 22, 2005, 4:50pm UTC](https://www.ruby-forum.com/t/drop-down-list-populating-second-drop-down-via-ajax/48562/4 "2005-11-22T16:50:13Z")

</div>

Thanks, Bogdan! That did the trick. I was trying different names, but I  
had not thought about the tag id.

Also I needed to get the value selected from the first drop-down box to  
build the data for the second. Here is what I determined I needed for  
the controller to populate the second box.

def load\_contacts  
client\_id = request.raw\_post  
@contacts = ClientContact.find :all, :order =\>“privilege desc,name”,  
:conditions=\>[“client\_id=?”,client\_id]  
render :layout=\>false  
end