select下拉菜单实现二级联动

需求：建立年级、班级两个数据表，获取年级表信息，根据年级，获取相应的班级
效果图：

不完美的地方就是在不选择年级的时候，是不能选择任何班级的（当然，这个也是有解决方案的。可可以百度一下动态sql，使用动态失去了即可解决）。

代码部分

首先是建立两个表的实体

需要注意的就是写注解了。代码就不贴了。

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 {@Autowiredprivate 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下拉菜单实现二级联动相关推荐

vue实现下拉二级联动_select下拉菜单实现二级联动效果
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分首先是建立两个表的实体需要注意的就是写注解了 ...
二级联动（两个下拉框的二级联动，和单选按钮与下拉框的二级联动）
1,两个下拉框的二级联动代码: <!DOCTYPE html><html lang="en"><head><meta charset=& ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去需要两张表: province:省份表 city: 城市表如图: 然后再在java中建立相关的实体类与之对应再然后,我们就能开始做jdbc的操作了 ...
html 下拉框字体,怎么把select下拉菜单里的文字设置成左右滚动效果
原标题:怎么把select下拉菜单里的文字设置成左右滚动效果希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢? " ...
html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...
谷歌浏览器无法选select_去除谷歌浏览器表单边框特效和select下拉菜单背景
01 02 textarea {resize:none;} 然后就是这个谷歌会自动加背景的问题: 这是谷歌浏览器内核特有.用:-webkit-appearance:none 解决. 附:sele ...
html下拉select美化,美化select下拉菜单
默认的select下拉菜单不容易美化,很多UI是无法通过css更改的,所以要美化先更改结构,下面介绍的美化插件尽管代码各异,但大部分都将默认的下拉菜单转化成样式可控的元素,例如div.ul.span等 ...
html切换下拉菜单改变页面,通过select下拉菜单改变页面内容
web前端使用技巧:通过select下拉菜单改变页面内容方法一: function changeTable(){ var tabIndex = document.getElementById(&qu ...