Rails里用AJAX实现级联下拉菜单

 方法1.用observe_field （观察者，监测select的事件）：
1）在view中：
点击触发的select:
<%= collection_select(:person, :area_id, @areas, :id, :name,
options = {}, {:id => 'person_area'}) %>
生成观察者的JS（:update是使用了innerHTML,在IE中select.innerHTML不能正确显示其中的option,，解决方法是返回完整的<select>更新其上级元素的innerHTML）：
<%= observe_field 'person_area', :update => 'person_area_places', :url => {:action => :area_places_options}, :with=>'id' %>
二级下拉菜单（需动态更新的）：
<%= collection_select(:person, :place_id, @places, :id, :name, { :include_blank => true }, {:id => 'person_area_places'} ) %>
2）在controller中：
    def area_places_options
      @places = Place.find_all_by_area_id(params[:id])
      # 因为只返回固定的option列，所以干脆连view都省了
      # [Place.new].concat(@places) 是为了能选择空值（对应 :include_blank => true）
      render :inline => %{<%= options_from_collection_for_select([Place.new].concat(@places), :id, :name) %>}
    end

方法2.把触发的事件定义直接嵌入到select中：
重点是remote_function的灵活运用
1）在view中：
点击触发的select:
<%= collection_select(:person, :area_id, @areas, :id, :name, options = {}, html_options = {:onChange => remote_function(:update => "person_area_places", :url => { :action => "area_places_options"}, :with => "'id='+value" )} ) %>

二级下拉菜单（一样）：
<%= collection_select(:person, :place_id, @places, :id, :name, { :include_blank => true }, {:id => 'person_area_places'} ) %>
2）在controller中,与方法1一样

最终采用方案
1）在view中：
点击触发的select:
<%= collection_select(:person, :area_id, @areas, :id, :name, options = {}, html_options = {:onChange => remote_function(:update => "person_area_places_box", :url => { :action => :area_places_select}, :with => "'id='+value" )} ) %>

二级下拉菜单（为了兼容IE，用个容器包起来）：
<span id="person_area_places_box">
<%= render :partial => 'places' %>
</span>

_places.rhtml:
<%= collection_select(:person, :place_id, @places, :id, :name, { :include_blank => true } ) %>

2）在controller中：
    def area_places_select
      @places = Place.find_all_by_area_id(params[:id])
      render :partial => 'places'
    end