Rails：利用ajax轻松实现二级级联_利用ajax实现级联列表-CSDN博客

本文链接：https://blog.csdn.net/wangdanyangtc/article/details/6794102

以下使用JQuery，ajax,实现rails的二级级联选择框

我根据访问的流程来实现这个功能

基本原理：两个并列的选择框，当第一个选择框中的选项被选中时，触发js方法，并把省份的id传给该方法，然后，在js与controller交互，也就是将省份的id传给controller，经过处理，将返回该省份下的所有城市到该js方法，将城市列表赋值到第二个选择框中。

一、视图部分

Ruby代码

<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部分

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>

<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值