实现select联动效果,数据从后台获取
效果如下:
当type值选择完后,amount值会自动相应填入。
1. 从后台获取数据,为一个数组,里面包含多个对象。
<select id="scholarshipTypeSelect"
resultType="com.entity.scholarshipTypeUser">
select first.id, first.type, second.amount
from scholarshipType first,scholarshipType second
where
first.type = second.type
</select>
采用了自身连接,将type与amount对应起来,形成对象,一个数组,发送到前端。
返回值:[{"id":1,"type":"学院级","amount":2000},{"id":2,"type":"学校级","amount":3000},{"id":3,"type":"国家级","amount":5000},{"id":4,"type":"国家励志级","amount":8000}]
2.在获取到数据之后,先给type赋值
在type中,item in types,由于获取到了types数据,所以在type的select选择框中是有数据的。
3.此时实现在点击select选择框中的选项时,amount中的数据会相应变化。
由于返回的是types数据,所以type中可以获取到值,但是amount中获取不到,没有明确赋值。
循环types数组,当select中选中时,判断每一项中是否有相等的,若是相等,将该项的amount值赋给amount的input输入框中。
此时,即实现了后台获取数据,select联动效果。
注意:
1.在select的循环选择框中,@on-change返回的是value,是选中项的值(:value="item.type")。与this.formValidate.type值一致。
若是使用elelment-ui框架的话,则为@change="selectType",使用方法与iview的一致。
2.不能在this中使用this,不然会获取不到,可以先定义一下:const _this = this;
3.v-model表单绑定:绑定的是输入框中的值。联动效果,也可以是两个select选择框。
实现select联动效果,数据从后台获取的更多相关文章
- vue+element UI 使用select元素动态的从后台获取到
VUE select元素动态的从后台获取到 <el-form-item label="选择店铺"> <el-select v-model="value& ...
- html form表单提交数据并后台获取
前台: HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) <h ...
- 使用axios post 提交数据,后台获取不到提交的数据解决方案
一.问题发现 前后端分离使用vue开发,结合axios进行前后端交互数据,一开始使用 get 请求,获取数据,没有发现任何问题,当使用 post请求 传参时,发现,数据明明已经提交,在打开F12 开发 ...
- 使用axios post 提交数据,后台获取不到
https://www.cnblogs.com/yiyi17/p/9409249.html(copy https://www.cnblogs.com/loveyaxin/p/8385694.html( ...
- ASP.NET Core 2.2 : 十六.扒一扒新的Endpoint路由方案 try.dot.net 的正确使用姿势 .Net NPOI 根据excel模板导出excel、直接生成excel .Net NPOI 上传excel文件、提交后台获取excel里的数据
ASP.NET Core 2.2 : 十六.扒一扒新的Endpoint路由方案 ASP.NET Core 从2.2版本开始,采用了一个新的名为Endpoint的路由方案,与原来的方案在使用上差别不 ...
- 腾讯云图片鉴黄集成到C# SQL Server 怎么在分页获取数据的同时获取到总记录数 sqlserver 操作数据表语句模板 .NET MVC后台发送post请求 百度api查询多个地址的经纬度的问题 try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后? js获取某个日期
腾讯云图片鉴黄集成到C# 官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: public c ...
- Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据
用servlet实现一个注册的小功能 ,后台获取数据. 注册页面: 注册页面代码 : <!DOCTYPE html> <html> <head> <meta ...
- .net后台获取DataTable数据,转换成json数组后传递到前台,通过jquery去操作json数据
一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){ DataTable dt = DBhepler.GetDataT ...
- (二)校园信息通微信小程序从后台获取首页的数据笔记
在从后台获取数据之前,需要先搭建好本地服务器的环境. 确保Apache,MySql处于开启状态.下图为Apache,MySql处于开启时状态 然后进入后台管理平台进行字段和列表的定义 然后在后台添加数 ...
随机推荐
- Android studio怎么使用自定义的framework而避免冲突报错和点不进去报红。
文件:xx\project_abc\video\build.gradle保证可以运行到自定义的framework而不报错,可能因为project和module名字相同所以导致下面的路径是绝对路径,其他 ...
- 一种解决Android studio 3.0 Build报错的方法
问题背景: 最近在开始使用AndroidStudio3.0,刚好有一个开源的项目(Material-Movies),需要学习下.因为该项目比较早(2015年),而这段时间AndroidStudio和G ...
- C# ToString()日期格式
C# ToString()日期格式 ToString:2016/9/27 0:00:00ToString("yyyy/MM/dd"):2016/09/27ToString(&quo ...
- centos7安装docker并设置开机自启以及常用命令
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...
- 配置安全的管理访问(GNS3)
实验拓扑: 实验目的: 尝试用R2/R3远程登陆R1路由器并进行管理,在此之前先在R1配置安全的管理访问 1.端口IP配置 R1: e1/0 192.168.1.1/24 e1/1 192.168.2 ...
- Scala操作Hbase空指针异常java.lang.NullPointerException处理
Hbase版本:Hortonworks Hbase 1.1.2 问题描述:使用Scala操作Hbase时,发生空指针异常(java.lang.RuntimeException: java.lang.N ...
- Elastic Stack-Kibana使用介绍(七)
一.前言 主要来讲述一下Kibana使用以及上生产时候的一些配置,要是大家对这块比较感兴趣我到时候也可以在结合Grafana做一些图表方面的介绍,后面等介绍完Beats以后我去阿里云租几台机器 ...
- promise async await使用
1.Promise (名字含义:promise为承诺,表示其他手段无法改变) Promise 对象代表一个异步操作,其不受外界影响,有三种状态: Pending(进行中.未完成的) Resolved( ...
- Ubuntu下找不到ttyUSB*问题解决
一.硬件连接 确认Ubuntu对USB转串口设备的支持. 1.# lsmod | grep usbserial如果有usbserial,说明系统支持USB转串口. 如果没有,先安装ch340驱动或者c ...
- ExcelPower_Helper插件功能简述与演示
部分功能演示简述: 1.文件目录浏览功能 此功能主要利用了ribbon的dynamicmenu控件,动态呈现自定义目录下的文件列表信息,支持点击打开,查看文件所在目录.功能来源于大神li ...