Rails轻松实现二级级联菜单

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值