rails 联动菜单

发表于:，更新于:，By Sally
大纲
  1. 1. 省市区三级联动菜单demo
    1. 1.1. view : 需要select选框
      1. 1.1.1. 此处，脸熟两个方法
    2. 1.2. view : 使用js来做联动
    3. 1.3. controller : js中需要调用controller中的方法，来获得可选值
    4. 1.4. 最后，还要添加一个该action的视图，不然会报错

省市区三级联动菜单demo

view : 需要select选框

1
2
3
4
5
<%= f.select :service_area_province_id, options_from_collection_for_select(Province.all, :code, :name, @supervisor.service_area_province_id), prompt: '--省份--' %>

<%= f.select :service_area_city_id, options_from_collection_for_select([], :code, :name, @supervisor.service_area_city_id), prompt: '--市区--' %>

<%= f.select :service_area_district_id, options_from_collection_for_select([], :code, :name, @supervisor.service_area_distrikt_id), prompt: '--区县--' %>

此处，脸熟两个方法

1
2
3
4
5
6
7
8
# params: container 可选项，数组形式    eg:[['确定', true], ['取消', false]];  selected:默认选项
options_from_collection_for_select(container, selected)

# params: collection 可选项，对象  eg:@people or People.all  控件value值  控件text值  默认选择项
options_for_select(collection, value_method, text_method, selected)

# 注: People.list 的返回值  [['zhangsan', 22], ['lisi', 33], ['wangwu', 44]]
这可能就是两个控件可以互相替换的桥梁吧。。。

view : 使用js来做联动

  • 这里控件的id，从页面自己找一下子哈

  • 控件的change事件

1
2
3
4
5
6
7
8
9
10
11
$('#supervisor_service_area_province_id').change(function(){
  $.get('/cities/get_options_by_province_code?id='+$(this).val(), function(data){
    $('#supervisor_service_area_city_id').html(data).trigger('change');    //触发自身的change事件
  }
}

$('#supervisor_service_area_city_id').change(function(){
  $.get('/cities/get_options_by_city_code?id='+$(this).val(), function(data){
    $('#supervisor_service_area_district_id').html(data);    //触发自身的change事件
  }
}

controller : js中需要调用controller中的方法，来获得可选值

  • 这里的action可以写在具体的某个模型对象的controller中，也可以专门写在一个公共的地方，如下：专门定义在一个公共地方
1
2
3
4
5
6
7
8
9
10
11
# -*- encoding : utf-8 -*-
class CommonsController < ApplicationController
  def get_options_by_province_code
    @cities = City.where :province_code => params[:province_code]
    render :layout => false
  end
  def  get_options_by_city_code
     @districts = District.where :city_code => params[:city_code]
     render :layout => false
  end
end

最后，还要添加一个该action的视图，不然会报错

  • no template…什么的

  • get_options_by_province_code.html.erb

  • get_options_by_city_code.html.erb

1
2
3
<%= options_from_collection_for_select @cities, :code, :name %>

<%= options_from_collection_for_select @districts, :code, :name %>