需求：建立年級、班級兩個數(shù)據(jù)表，獲取年級表信息，根據(jù)年級，獲取相應(yīng)的班級
效果圖：
不完美的地方就是在不選擇年級的時候，是不能選擇任何班級的。
代碼部分
首先是建立兩個表的實(shí)體
需要注意的就是寫注解了。代碼就不貼了。
DAO層代碼
年級DAO
年級的DAO層沒什么代碼，就是繼承那三個類，具體用到哪個我也不清楚，就直接都繼承了。
public interface GraceDAO extends PagingAndSortingRepositoryGrace, String>,JpaSpecificationExecutorGrace>,JpaRepositoryGrace, String>
{
}
班級DAO
班級DAO里面就這一行代碼，用的是內(nèi)置的findBy方法，我的gid在數(shù)據(jù)庫中是int型，在這里為了方便用的string型（我的可以實(shí)現(xiàn)操作，不可以的話強(qiáng)制轉(zhuǎn)型成int就可以了，問題不大）
ListCla> findByGid(String gid);
service層
年級
年級這里不需要有什么操作，直接查出全部就可以了，所以我就用了內(nèi)置的findAll方法
@Service
public class GraceService {
@Autowired
private GraceDAO graceDAO;
public ListGrace> findAll(){
return graceDAO.findAll();
}
}
///////下面是內(nèi)置findAll方法的注釋什么的。用不到，只是貼出來給大家看一下
/*
* (non-Javadoc)
* @see org.springframework.data.repository.CrudRepository#findAll()
*/
ListT> findAll();
班級
班級這里要根據(jù)獲取到的gid進(jìn)行查詢
public ListCla> findByGid(String gid){
return claDAO.findByGid(gid);
}
Controller層
//查詢所有年級信息
@RequestMapping("grace")
@ResponseBody
public ListGrace> grace(){
return graceService.findAll();
}
//根據(jù)年級的gid獲取班級信息
@RequestMapping("cla")
@ResponseBody
public ListCla> 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//可以讓年級的下拉框默認(rèn)選擇option value="0">----請選擇年級--- /option>項
},
mounted(){//頁面加載時開始加載下面的兩個方法
this.grace();//年級
this.claa();//班級，為了避免class關(guān)鍵字，用的其他名字
},
methods:{//自定義方法
grace:function(){
$.post("/work/grace",{},function(data){
vm.grac = data;
});
},
claa:function(){
//alert(this.gid);
//傳參：傳遞當(dāng)前選中的gid
$.post("/work/cla",{gid:this.gid},function(data){
//alert(JSON.stringify(data));
vm.cla = data;
});
},
}
});
總結(jié)
以上所述是小編給大家介紹的select下拉菜單實(shí)現(xiàn)二級聯(lián)動效果，希望對大家有所幫助！
您可能感興趣的文章:- js動態(tài)設(shè)置select下拉菜單的默認(rèn)選中項實(shí)例
- 詳解Vue用自定義指令完成一個下拉菜單（select組件）
- jQuery插件cxSelect多級聯(lián)動下拉菜單實(shí)例解析
- jQuery模擬select實(shí)現(xiàn)下拉菜單功能
- js實(shí)現(xiàn)select二級聯(lián)動下拉菜單
- yii2框架中使用下拉菜單的自動搜索yii-widget-select2實(shí)例分析
- jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果
- jsp中將后臺傳遞過來的json格式的list數(shù)據(jù)綁定到下拉菜單select
