本文参考了一些网上的相关资料。
二级联动菜单即是第二级菜单根据第一级菜单的选择进行相应的改变。
Rails实现如下,首先是View中的相关代码:
<tr>
<td bgcolor="#FFFFFF">居住地区:<span class="alarm"></span></td>
<td bgcolor="#FFFFFF">
<%= select(:city, :name, @cities, {}, { "onchange" => remote_function(
:with => "'parent_id='+value",:update => 'next_select', :url => { :action => :select_with_ajax } ) })%>
<span id='next_select'></span>
<select> <span class="gray">正确填写可以帮你快速找到同城的宝宝和信息。</span></td>
</tr>
需要注意的一点是select中的第四个参数 {} 是必须保留的,网上很多没有成功的例子就是忽略了这个。因为Rails API中select方法的定义是这样的:select(object, method, choices, options = {}, html_options = {})。
controller中的方法如下:
def select_with_ajax
@areas = City.find(:all, :conditions => ["parent_id = ?", params[:parent_id]]).collect { |city| [city.name, city.id] }
render(:layout => false)
end
这里根据参数中传递的parent_id生成2级列表。
select_with.ajax.rhtml代码如下: