Rails:利用ajax轻松实现二级级联
以下使用JQuery,ajax,实现rails的二级级联选择框
我根据访问的流程来实现这个功能
基本原理:两个并列的选择框,当第一个选择框中的选项被选中时,触发js方法,并把省份的id传给该方法,然后,在js与controller交互,也就是将省份的id传给controller,经过处理,将返回该省份下的所有城市到该js方法,将城市列表赋值到第二个选择框中。
一、视图部分
<div>省、市:</div>
<%= select_tag "province", options_for_select(["----请选择----"] + Register::Province.all.collect{|e| [e.name,e.id]}), :onchange => "get_options(this.value)" %>
<%= select_tag "city", "<option value=\"0\">--请选择上级--</option>"%>
上面给出了两个选择框
第一个框中从数据库中读出省份,第二个选择框初始值为一个选项 --请选择上级--
当第一个选择框中的选项被选中时,触发get_options方法,并将选项的值,也就是省份的id传给此方法
二、js部分
<script type="text/javascript"> function get_options(value){ $.ajax({ type: "POST", url:'/friend/friend_state/get_options?id='+value, data:'text', success: function(data){ $("#city").html(data); } } ) } </script>
其中, url为与该方法交互的controller中的方法路径,并将省份id保存到标量id中,传到controller
返回值类型为文本,并将值赋给第二个选择框
三、controller部分
#省市,二级级联
def get_options
options = ""
city = Register::Province.find_by_id(params[:id]).city
city.each do |s|
options << "<option value=#{s.id}>#{s.name}</option>"
end
render :text => options
end
返回值即是第二个选择框的option值