select下拉菜单实现二级联动效果
作者:生花脱颖 发布时间:2023-05-22 22:30:32
标签:select,下拉菜单
需求:建立年级、班级两个数据表,获取年级表信息,根据年级,获取相应的班级
效果图:
不完美的地方就是在不选择年级的时候,是不能选择任何班级的。
代码部分
首先是建立两个表的实体
需要注意的就是写注解了。代码就不贴了。
DAO层代码
年级DAO
年级的DAO层没什么代码,就是继承那三个类,具体用到哪个我也不清楚,就直接都继承了。
public interface GraceDAO extends PagingAndSortingRepository<Grace, String>,JpaSpecificationExecutor<Grace>,JpaRepository<Grace, String>
{
}
班级DAO
班级DAO里面就这一行代码,用的是内置的findBy方法,我的gid在数据库中是int型,在这里为了方便用的string型(我的可以实现操作,不可以的话强制转型成int就可以了,问题不大)
List<Cla> findByGid(String gid);
service层
年级
年级这里不需要有什么操作,直接查出全部就可以了,所以我就用了内置的findAll方法
@Service
public class GraceService {
@Autowired
private GraceDAO graceDAO;
public List<Grace> findAll(){
return graceDAO.findAll();
}
}
///////下面是内置findAll方法的注释什么的。用不到,只是贴出来给大家看一下
/*
* (non-Javadoc)
* @see org.springframework.data.repository.CrudRepository#findAll()
*/
List<T> findAll();
班级
班级这里要根据获取到的gid进行查询
public List<Cla> findByGid(String gid){
return claDAO.findByGid(gid);
}
Controller层
//查询所有年级信息
@RequestMapping("grace")
@ResponseBody
public List<Grace> grace(){
return graceService.findAll();
}
//根据年级的gid获取班级信息
@RequestMapping("cla")
@ResponseBody
public List<Cla> cla(HttpServletRequest req){
String gid = req.getParameter("gid");
//System.out.println(gid);
return claService.findByGid(gid);
}
前端代码
html部分
<div id="app">
年级:
<select v-on:change="claa()" v-model="gid">
<option value="0">----请选择年级--- </option>
<option v-for="gra in grac" :value="gra.gid">{{gra.gname}}</option>
</select>
班级:
<select>
<option v-for="cl in cla">{{cl.cname}}</option>
</select>
</div>
js部分
var vm = new Vue({
el: '#app',
data:{
grac:[],
cla:[],
gid:0//可以让年级的下拉框默认选择<option value="0">----请选择年级--- </option>项
},
mounted(){//页面加载时开始加载下面的两个方法
this.grace();//年级
this.claa();//班级,为了避免class关键字,用的其他名字
},
methods:{//自定义方法
grace:function(){
$.post("/work/grace",{},function(data){
vm.grac = data;
});
},
claa:function(){
//alert(this.gid);
//传参:传递当前选中的gid
$.post("/work/cla",{gid:this.gid},function(data){
//alert(JSON.stringify(data));
vm.cla = data;
});
},
}
});
总结
以上所述是小编给大家介绍的select下拉菜单实现二级联动效果,希望对大家有所帮助!
来源:https://blog.csdn.net/ZF2015908732/article/details/102694926
0
投稿
猜你喜欢
- 使用 ProcessPoolExecutorfrom concurrent.futures import ProcessPoolExecut
- Python 功能真的很强,强大到让人吃惊,它能做的事囊括爬虫、数据分析、数据可视化、游戏等等各方面,这些功能在实际的使用中应用广泛,开发程
- 测试环境win10python 3.5yield功能简介简单来说,yield 的作用就是把一个函数变成一个 generator,带有 yie
- Python 中的 main 函数充当程序的执行点,在 Python 编程中定义 main 函数是启
- 问:如何让内联框架里面的网页背景透明?(用iframe嵌套一网页,怎么能够设置其背景为透明以便能显示父框架中网页的背景图?)答:这是需要 I
- 本文实例讲述了Python实现的IP端口扫描工具类。分享给大家供大家参考,具体如下:去年服务器老是被攻击,每次上线之后,上线的人急急忙忙下班
- UPDATE语句的速度更新查询的优化同SELECT查询一样,需要额外的写开销。写速度依赖于更新的数据大小和更新的索引的数量。没有更改的索引不
- 前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。作者:黑白之道刮刮
- 程序用例:a=[[1,2],[4,5]]b=[0]*len(a)d=0*len(a)print("len(a)=",le
- 前言之前看到 RunCat 一只可以在电脑上奔跑猫,其主要的功能是监控电脑的CPU、内存的使用情况,使用越多跑的越快。所以准备做一只在任务栏
- 参数解释DataFrame.sort_values(by, &nbs
- 自己有一套模块化的思路,想搜索一下有没有共鸣结果排名靠前的是通过class拼凑页面的想法。模块化是twinsen提出来的,从我接收第一个po
- 这是个郁闷的问题。主级获得ID列表 select ID from FS_SD_Address where PID=0
- 最近打算开始研究一下机器学习,今天在windows上装tensorflow花了点功夫,其实前面的步骤不难,只要依次装好python3.5,n
- 代码如下: <!-- #include file="../conn.asp" --> <!-- #in
- 很有创意的鼠标指针风筝,看起来非常有意思。在网络上看到的,一下也想不起来是那里的了,所以特别说一下图片是来自网络的,版权归作者所有。
- 需求目标执行Python程序的时候在控制台输出内容的时候只显示一行,然后自动刷新内容,像这样:Downloading File FooFil
- 本文实例讲述了Python实现自动登录百度空间的方法。分享给大家供大家参考,具体如下:开发环境:Fedora12 + Python2.6.2
- 可以把本功能写成一个函数,函数的处理过程描述如下:首先调用adodb.connection对象中的openSchema函数,这样会得到一个R
- 应用场景:工作中经常遇到大量的数据需要整合、去重、按照特定格式导出等情况。如果用 Excel 操作,不仅费时费力,还不准确,有么有更高效的解