zoukankan      html  css  js  c++  java
  • javascript实现select菜单/级联菜单(用Rails.ajax实现发送请求,接收响应)

    在购物网站,填写收货地址的时候,会出现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。

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

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

    2. rails g controller province_changes

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

    接收客户端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的写法,⚠️接收的数据的格式。

  • 相关阅读:
    湖湘杯2020misc
    BUUOJ(Misc)
    BUUOJ(Web)
    网络信息安全攻防学习平台
    CTFHub web部分题解
    BugkuCTF 部分WP(搬运了很多WP)
    Web安全之机器学习入门 第2章-第5章学习笔记
    结构体
    排序的使用
    字符串和日期
  • 原文地址:https://www.cnblogs.com/chentianwei/p/9528258.html
Copyright © 2011-2022 走看看