方法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中:
defarea_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,用个容器包起来):
<spanid="person_area_places_box">
<%= render :partial => 'places'%>
</span>
_places.rhtml:
<%= collection_select(:person, :place_id, @places,:id, :name, { :include_blank => true } )%>
2)在controller中:
defarea_places_select
@places = Place.find_all_by_area_id(params[:id])
render :partial => 'places'
end