Sacha Fuentes

Si necesitamos tener dos dropdown relacionados, en el cual los valores del segundo dependan de cual esté seleccionado en el primero, podemos hacerlo mediante Ajax.

Supongamos las siguientes tablas:

countries
  id  INT
  name  VARCHAR

cities
  id INT
  country_id INT
  name VARCHAR

Queremos dos dropdown, de forma que los valores de las ciudades se carguen dependiendo del país seleccionado. Para ello, en el controlador creamos la función:

def list_cities
  @cities = City.find_all_by_country_id(@params["country_id"])
  @html = "<SELECT id=city_id name=group[city_id]>" 
  @html += "<OPTION selected value="">Select city</OPTION>" 
  @cities.each do |@city| 
    @html += "<OPTION value="#{@city.id}">#{@city.name}</OPTION>" 
  end 
  @html += "</SELECT>"
end

y en la vista:

<select id="group_country_id" name="group[country_id]"> 
  <option value="" selected>Select country</option></select>

<div id="city_id_container">
  <select id="group_city_id" name="group[city_id]">
    <option value="" selected>Select city</option>
  </select>
</div>

<%= observe_field "group[country_id]",
  :frequency => 0.25,
  :update => "city_id_container",
  :url => { :action => :list_cities },   
  :with => "'country_id='+value")
 %>

El truco está en el observe_field, que observa el dropdown de los países, y cuando su valor cambia hace una llamada al método list_cities pasando como parámetro el país seleccionado. Este devuelve el HTML que se inserta en el div con valor city_id_container.

Muy útil y limpio, aunque encontrar la documentación para hacer esto es un poco difícil, así que lo dejo aquí para quien lo necesite.