javascript实现select菜单/级联菜单(用Rails.ajax实现发送请求,接收响应)
在购物网站,填写收货地址的时候,会出现XX省XX市XX区的下拉菜单,如何实现此功能?思路是什么?
功能设置:
当选择省select菜单后,市的select菜单为这个省的城市列。
当选择市菜单后,区菜单为这个市的各个区的列。
思路:
- 数据库的设计,如何存取数据。
- 根据两次选择的行为, 设置路径和controller。
- 使用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的写法,⚠️接收的数据的格式。
javascript实现select菜单/级联菜单(用Rails.ajax实现发送请求,接收响应)的更多相关文章
- JavaScript -- Input Select 操作, 级联菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript笔记8-表单脚本、JSON、AJAX
通过表单提交,很方便的可以从界面把参数传递给后台. 如果前后台我们有大量数据需要交互,JSON方便我们传递和读取. 如果需要更新一个界面的某一部分数据,并不想刷新界面,就要用到Ajax. 1. 表单脚 ...
- 使用JavaScript数组实现省份和城市的级联菜单
查看本章节 查看作业目录 需求说明: 使用数组实现省份和城市的级联菜单.具体要求如下 在页面中添加城市时,根据选择的省份,动态地添加该省份的城市 页面加载完毕后,第一个列表框填充"两湖两广& ...
- javascript级联菜单,数据从数据库中获取
1.html代码: <%@ page contentType="text/html; charset=gb2312" %> <%@ page import=&qu ...
- JS实战 · 级联菜单选择省份和城市(两种)
DOM编程步骤.思路 1.定义界面: 通过html标签将数据进行封装: 2.定义一些静态样式: 利用css: 3.需要动态地完成的和用户的交互: a:明确事件源: ...
- JS动态级联菜单
JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...
- 前台JS(Jquery)调用后台方法 无刷新级联菜单示例
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...
- 使用json方式实现省市两级下拉级联菜单[原创]
本文为博主原创,转载请注明. 首先看一下实现后的效果图: 当然,要完成这个实验,mysql必须与数据库连接,这里选用navicat for mysql这款软件,它与mysql的契合度是很高的,配置环境 ...
- Ajax实现动态的二级级联菜单
今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...
随机推荐
- Java HTTP通信--Get与POST请求
一.JDK自带的http通信机制--java.net.URL package com.wjy; import java.io.BufferedReader; import java.io.Buffer ...
- Python: 字典列表: itemgetter 函数: 根据某个或某几个字典字段来排序列表
问题:根据某个或某几个字典字段来排序Python列表 answer: 通过使用operator 模块的itemgetter 函数,可以非常容易的排序这样的数据结构 eg: rows = [ {'fna ...
- Python: 序列list:保持元素顺序同时消除重复值
问题:怎样在Python的一个序列上面保持元素顺序的同时消除重复的值?answer:如果序列上的值都是hashable 类型,那么可以很简单的利用集合或者生成器来解决这个问题. eg1: def de ...
- IOS中position:fixed吸底时的滑动出现抖动的解决方案
H5方法: //吸顶头部 .header{ width:100%; height:50px; position:fixed; top:0px; } //main滑动区域 .main{ width:10 ...
- 计算概论(A)/基础编程练习2(8题)/1:求平均年龄
#include<stdio.h> int main() { // 声明与初始化 , s=, age=; // 输入学生人数 scanf("%d", &n); ...
- Python中模块(Module)和包(Package)的区别
本文绝大部分内容转载至:廖雪峰官方网站 1. 模块(Module) 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函 ...
- 什么叫集群、分布式,分布式与集群有什么区别?(康神sf讲座学习笔记)
集群是物理形态,分布式是工作方式. 只要一堆机器放在那里,就是集群.比如Nginx后面的十台服务器,就是一个集群 分布式将任务放在多个物理隔离的节点上进行. 分布式中各个子节点互不通信,统一受管控中心 ...
- 配置redis, make的时候: zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录
今天正在centos7.3里面配置redis3.0, 结果make的时候抛出编译中断 CC adlist.o In file included from adlist.c:34:0: zmalloc. ...
- 20145313张雪纯exp7
问题 (1)通常在什么场景下容易受到DNS spoof攻击 处于局域网中的时候,例如连接了学校/公司/餐厅wifi. (2)在日常生活工作中如何防范以上两攻击方法 不要轻易点开未知网址.鼠标在链接处停 ...
- np.tile 和np.newaxis
output array([[ 0.24747071, -0.43886742], [-0.03916734, -0.70580089], [ 0.00462337, -0.5143158 ...