Interacting select_tags using onchange

my view:

<%= render :partial => "event_category_select" %>

<%= render :partial => "event_category_text_field" %>
<%= render :partial => "event_description_select" %>

<%= render :partial => "event_description_text_field" %>

<%= select_tag :select_category, options_for_select(@categories,
selected = @selected_category),
{:onchange => remote_function(:url => {:action
=> :select_category}, :with => “select_category”)} %>

<%= text_field_tag :category, @selected_category, :size => 30 %>

<%= select_tag :select_description, options_for_select(@descriptions,
selected = @selected_description),
{:onchange => remote_function(:url => {:action
=> :select_description}, :with => “select_description”)} %>

<%= text_field_tag :description, @selected_description, :size => 60 %>


def select_category
@selected_category = params[:value]
search_hash = {:select => “DISTINCT description”}
search_hash[:conditions] = [“category = ?”, @selected_category] if
@selected_category != “”
@descriptions = ["", *Event.find(:all,
@selected_description = “”
render :update do |page|
page.replace_html “event_category_text_field”, :partial =>
page.replace_html “event_description_select”, :partial =>

def select_description
@selected_description = params[:value]
@categories = ["", *Event.find(:all, :select => “DISTINCT
if @selected_description != “”
selected_event = Event.find(:first, :conditions => [“description
= ?”, @selected_description])
@selected_category = selected_event.category if selected_event
@selected_category = “”
render :update do |page|
page.replace_html “event_category_select”, :partial =>
page.replace_html “event_description_text_field”, :partial =>

With ie 7.0 everything’s fine, but with firefox 3.0:

When I select a category, the two ids are replaced. After that, I want
to select a description, but it doesn’t send a request. However,
selecting another category does. The same the other way round, i.e.
when I begin with selecting a description.

The source code is of no avail, because with both browsers it never
changes whatever I select.

Any idea?


Hey, do you solved your problem or found a work-around?

If so I’m interested in it because I do have a similar problem.


sorry, I still didn’t find a solution. I don’t have much experience
with javascript.

From what I can see, the most likely cause of this is that there is an
issue with the dom, such that when you do the update, the browser is
not seeing the fields or ids correctly

A couple of suggstions:

Use firebug to carefully inspect the dom before and after the updates
and make sure the ids are ok and that the elements are structured

If you cannot see anything obvious, strip the view code down so that
the only things being rendered are the actual select fields. Then you
should be able to see why the onchange is not firing.

If you get it down to very simple/minimal example that still
demonstrates a problem, post it here and i will see if i can repeat



Looking again at the code, I suspect the problem may be that you are
updating table cells. I think i have seen something similar with ff.
In general, I tend to always update a whole row.


  1. You don’t need the form tag if you are only updating by ajax.
    Html purists might argue the point!

  2. You can use any element to update from a partial. For example,
    give the tr an id as in:

then in the controller, page.replace_html :update_me etc.....
  1. Sometime I find it easier to include the

    tag in the partial
    itself, so that the whole row, not just the inner html gets replaced.
    In this case use page.replace :update_me in the controller.
  2. You may find if you get rid of the form tags, that updating

    s may work, but I would be wary of it.

    hth Tonypm

Very nice tool, I didn’t know firebug.

I think I’ve found the reason of the problem: When you update fields
of a form, they forget to which form_tag they belong. (Why do we need
a form_tag for these select_tags, as they are only used for setting
other fields by onchange?)

Updating another partial containing the form_tag doesn’t work, so
you’ve got to update the whole form. But I didn’t find a way to update
a table row: A

can’t be between a and a element,
and a form_tag can’t be between and <% end %>

def select_number
@number = params[:value]
index = [’’,‘1’,‘2’].index(@number) || 0
@letter = [’’,‘a’,‘b’][index]
render :update do |page|
page.replace_html “test”, :partial => “test”

def select_letter
@letter = params[:value]
index = [’’,‘a’,‘b’].index(@letter) || 0
@number = [’’,‘1’,‘2’][index]
render :update do |page|
page.replace_html “test”, :partial => “test”

I also included a field ‘additional’ which will also be updated with
the whole form. How can I keep the values of such fields?


. A simple example:
<%= render :partial => 'test' %>


<% form_tag do %>

number: <%= select_tag :select_number, options_for_select(['','1','2'], selected = @number), {:onchange => remote_function(:url => {:action => :select_number}, :with => "select_number")} %> letter: <%= select_tag :select_letter, options_for_select(['','a','b'], selected = @letter), {:onchange => remote_function(:url => {:action => :select_letter}, :with => "select_letter")} %> additional: <%= text_field_tag :additional, @additional %>

Without the form_tag, everything’s fine with IE 7.0. But with firefox
3.0.3, I don’t even get a request. (javascript completely enabled)

<%= render :partial => 'test' %>


  <%= select_tag :select_number, options_for_select(['','1','2'],

selected = params[:value]),
{:onchange => remote_function(:url => {:action
=> :select_number}, :with => “select_number”)} %>

selected: <%= params[:value] %>

def select_number
render :update do |page|
page.replace_html “test”, :partial => “test”

And using page.replace with in the partial leads to
something like


You’re right, the problem was just :with => “select_number”

Using :with => “‘value=’+value” works.