# Need help with select tags and AJAX

**URL:** <https://www.ruby-forum.com/t/need-help-with-select-tags-and-ajax/102727>\
**Category:** Rails\
**Created:** [March 26, 2007, 9:30pm UTC](https://www.ruby-forum.com/t/need-help-with-select-tags-and-ajax/102727 "2007-03-26T21:30:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mephtik](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/ea666f/32.png) [@mephtik](https://www.ruby-forum.com/u/mephtik)\
**Post date:** [March 26, 2007, 9:30pm UTC](https://www.ruby-forum.com/t/need-help-with-select-tags-and-ajax/102727/1 "2007-03-26T21:30:24Z")

</div>

Here’s my situation. I’ve got a select form that I’m populating with a  
list of colors. I then have a database with a list of products, and each  
product has a specific color. Some colors have multiple products (ie.  
there are several “green” products). Based on what color the user  
selects, I then want to display (below the form) a list of all products  
that match that color. What I’d like to have happen is, rather than  
clicking on one of the options and hitting submit, I’d like the page to  
(via AJAX) update when I click one of the options. Does anyone have any  
suggestions on how to do this? Thanks for the help!

---

<div class="post-metadata">

**Author:** ![mephtik](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/ea666f/32.png) [@mephtik](https://www.ruby-forum.com/u/mephtik)\
**Post date:** [March 30, 2007, 12:33am UTC](https://www.ruby-forum.com/t/need-help-with-select-tags-and-ajax/102727/2 "2007-03-30T00:33:00Z")

</div>

Brandon Robison wrote:

> Here’s my situation. I’ve got a select form that I’m populating with a  
> list of colors. I then have a database with a list of products, and each  
> product has a specific color. Some colors have multiple products (ie.  
> there are several “green” products). Based on what color the user  
> selects, I then want to display (below the form) a list of all products  
> that match that color. What I’d like to have happen is, rather than  
> clicking on one of the options and hitting submit, I’d like the page to  
> (via AJAX) update when I click one of the options. Does anyone have any  
> suggestions on how to do this? Thanks for the help!

You have two options, you can add an AJAX.updater to the select tag  
using the onchange hook, or you can use an observer to monitor the  
select list for changes.

Using the onchange hook will produce cleaner generated HTML, but uglier  
ruby in rhtml. It does have the advantage of reducing the number of ajax  
calls being made to the controller, since it only makes a call once you  
select an option.

# rhtml

\<%= select :page, :colors, [“red”, “blue”, “green”],  
{ include\_blank =\> true },  
{ :onchange =\> “new Ajax.Updater(  
‘div\_id\_to\_update’,  
‘/controller/method’,  
{method: ‘get’,  
parameters: pars  
});”  
}%\>

any response sent back from the controller will be placed in the div.  
send back plain text, a partial or a rendered layout… experiment and  
LEARN.

Using an observer produces nice snappy ruby rhtml, but it’s harder to  
see whats going on by looking at the generated HTML. Also if your  
worried about traffic you’ll have issues with it sending a request for  
each change in the list (ie. as your scrolling through it).

# rhtml

\<%= select :page, :colors, [“red”, “blue”, “green”], {include\_blank =\>  
true} %\>  
\<%= observe\_field(:page\_colors,  
:frequency =\> 0.5,  
:update =\> “div\_id\_to\_update”,  
:url =\> { :action =\> “method in controller” },  
:with =\> “‘color=’ + value”)  
%\>

watch out for the :with clause, as it gets parsed into text on the page  
and evaluated as javascript. so the resulting javascript would be

‘color’ + value

where value is the selected option in the list, and color is the name of  
the request parameter.

these links should help  
[http://www.rubyonrailsblog.com/articles/2006/10/04/ruby-on-rails-cheat-sheet-collectors-edition](http://www.rubyonrailsblog.com/articles/2006/10/04/ruby-on-rails-cheat-sheet-collectors-edition)

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

if your still having issues i’d recommend picking up the Pragmatic Ajax  
book, or Agile Web D. with Rails (another Pragmatic book).