select下拉菜单实现二级联动效果
作者:生花脱颖 时间:2023-05-22 22:30:32
需求:建立年级、班级两个数据表,获取年级表信息,根据年级,获取相应的班级
效果图:
不完美的地方就是在不选择年级的时候,是不能选择任何班级的。
代码部分
首先是建立两个表的实体
需要注意的就是写注解了。代码就不贴了。
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
标签:select,下拉菜单
0
投稿
猜你喜欢
python获取天气接口给指定微信好友发天气预报
2023-08-11 18:13:06
javascript面向对象编程(四)
2008-03-07 14:20:00
Python获取时间范围内日期列表和周列表的函数
2023-03-25 15:16:39
对Python3中bytes和HexStr之间的转换详解
2022-12-10 22:15:36
Python生产者与消费者模型中的优势介绍
2023-06-18 01:21:17
通过python调用adb命令对App进行性能测试方式
2023-10-05 06:24:25
Python异常处理操作实例详解
2023-05-06 11:31:05
交互设计实用指南系列(10)—别让我思考
2010-03-01 12:50:00
使用Python编写爬虫的基本模块及框架使用指南
2021-08-21 17:45:19
解决SecureCRT通过SSH连接Ubuntu时vi命令有多余的m的问题
2023-11-19 19:32:24
FSO中的SubFolders 属性介绍
2008-01-05 13:57:00
Python实现的读取/更改/写入xml文件操作示例
2023-06-05 05:16:42
Python开源自动化工具Playwright安装及介绍使用
2023-08-20 13:17:43
PL/SQL 类型格式转换
2009-02-26 11:07:00
Python面向对象编程关键深度探索类与对象
2021-12-07 03:06:20
python中Pyqt5使用Qlabel标签进行视频播放
2021-12-19 13:32:20
python实现代码审查自动回复消息
2021-09-15 22:20:46
现代Python编程的四个关键点你知道几个
2023-11-22 02:17:42
python学习之读取配置文件
2021-05-11 11:42:20
opencv python统计及绘制直方图的方法
2021-12-27 21:52:45