以下使用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>"%>
<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部分
Ruby代码
- 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
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值