Rails轻松实现二级级联菜单_Ruby_编程开发_程序员俱乐部

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值

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?