Rails Select Tag and Onchange Event Calling a Remote Function with Default Option Selected

Here is a little code snippet that will fire off a request to update_client_path when you change the select field. This stands alone, rather than being apart of a larger form. The Client::CATEGORY argument is a hash, which I populated manually in my Client.rb model. It is something like this

CATEGORY = {:lead => "Prospective clients", :past => "Previous clients..."}

In my view I have

<%= select_tag "client_category",
 options_for_select(Client::CATEGORY.keys, @client.category.to_sym),
 { :onchange => remote_function( :url => update_client_path(@client), :with=>"'change_to='+this.value+''" ) } %>

One gotcha is that the select_tag, options_for_select argument expects a symbol if you’re passing in a hash as the type of the collection! It may not set the default if you provide it with a string for the second arg (which specifies which option should be set as selected).

You also need to make sure that the url update_client_path is set in your routes file and that your controller (clients_controller in this case) has the appropriate method to handle the request.

Onchange Event Fired from Select Field in Rails Form

In the view there is a regular Rails form and a javascript function that will be triggered when the country select field is changed. The javascript function will make an ajax request to the country_select url with the country code passed as the id variable, e.g., /country_code/us for the United States. I’m also using the Carmen plugin for this example which will provide a list of countries and their respective states/provinces. Not all countries are full supported. More information on Carmen can be found at http://autonomousmachine.com/2009/4/1/carmen-a-rails-plugin-for-geographic-names-and-abbreviations and http://github.com/jim/carmen

<%form_for(@model) do |f| %>
<script type="text/javascript" charset="utf-8">
  function change_state_select(state_code)
 {
    new Ajax.Request('/country_select/'+state_code,
    {
      method: 'get',
      onSuccess: function(transport) {
        $('state_select').replace(transport.responseText);
      }
    });
  }
 </script>
 <%= f.select :country,
   Carmen::COUNTRIES,
   {},
   { :onchange => "change_state_select(this.options[this.selectedIndex].value);" }
%>
<div id='state_select'></div>

***Note the : onchange should really be one word but an emoticon shows up otherwise :onchange :(***
Since not all countries are supported I need to execute some conditional logic in the action country_select. If the country is supported I’ll return a snippet of html containing a select field that my form will use. If the country is not supported I’ll return a text field so that the user can write in their state/province.

class CountrySelectController < ApplicationController
  def country_selecet
      begin
         @states = Carmen::states(params[:id])
      rescue
         @states = nil
      end
      render :partial => "country_select/states"
  end
end

In the final partial that is rendered there is either a select field or a text field

<div id="state_select">
  <% if @states.nil? %>
    <%= text_field_tag :model, :state %>
  <% else %>
    <%= select :model, :state, @states%>
  <% end %>
</div>