javascript实现select菜单/级联菜单(用Rails.ajax实现发送请求,接收响应)

时间:2022-12-28 16:09:38

在购物网站,填写收货地址的时候,会出现XX省XX市XX区的下拉菜单,如何实现此功能?思路是什么?

功能设置:

 当选择省select菜单后,市的select菜单为这个省的城市列。

 当选择市菜单后,区菜单为这个市的各个区的列。

思路:

  1. 数据库的设计,如何存取数据。
  2. 根据两次选择的行为, 设置路径和controller。
  3. 使用javascript发送请求和接收响应,获得需要的数据,并更新DOM。

具体案例:

 git: https://github.com/chentianwei411/select_list/tree/02

 单独把02分支推送到远程 git push origin 02:02

第一步:设计数据库。

Province 1---N >  City 1--N > Area

第二步:路径和controller。

1. rails g scaffold Post title。 增加了页面index,new。

在new.html.erb上增加级联菜单select。

javascript实现select菜单/级联菜单(用Rails.ajax实现发送请求,接收响应)

⚠️: options_from_collection_for_select()有4个参数,数据集合,option标签的value,option标签的text, option标签的默认选项。具体设置见API

在controller, posts#new中对上面的实例变量赋值。⚠️,如果数据库为空的时候,实例变量也需要赋值。

javascript实现select菜单/级联菜单(用Rails.ajax实现发送请求,接收响应)

2. rails g controller province_changes。

在这个控制器上增加2个方法,getcities, getareas。这两个方法对应着级联菜单select的省的选择,市的选择。

javascript实现select菜单/级联菜单(用Rails.ajax实现发送请求,接收响应)

接收客户端request发过来的数据,处理完,发出json格式的响应给客户端。

routs.rb中增加:

root 'posts#index'
get '/posts/province_changes/getcities',  to: 'province_changes#getcities'
get '/posts/province_changes/getareas',  to: 'province_changes#getareas'

注意⚠️: 路径一定要写正确。

第三步:写script脚本。这里只放上第一个省select的监听事件的图片。

⚠️上传的data的写法,⚠️接收的数据的格式。

javascript实现select菜单/级联菜单(用Rails.ajax实现发送请求,接收响应)