需求：建立年級(jí)、班級(jí)兩個(gè)數(shù)據(jù)表，獲取年級(jí)表信息，根據(jù)年級(jí)，獲取相應(yīng)的班級(jí)
效果圖：
不完美的地方就是在不選擇年級(jí)的時(shí)候，是不能選擇任何班級(jí)的。
代碼部分
首先是建立兩個(gè)表的實(shí)體
需要注意的就是寫注解了。代碼就不貼了。
DAO層代碼
年級(jí)DAO
年級(jí)的DAO層沒什么代碼，就是繼承那三個(gè)類，具體用到哪個(gè)我也不清楚，就直接都繼承了。
public interface GraceDAO extends PagingAndSortingRepositoryGrace, String>,JpaSpecificationExecutorGrace>,JpaRepositoryGrace, String>
{
}
班級(jí)DAO
班級(jí)DAO里面就這一行代碼，用的是內(nèi)置的findBy方法，我的gid在數(shù)據(jù)庫(kù)中是int型，在這里為了方便用的string型（我的可以實(shí)現(xiàn)操作，不可以的話強(qiáng)制轉(zhuǎn)型成int就可以了，問題不大）
ListCla> findByGid(String gid);
service層
年級(jí)
年級(jí)這里不需要有什么操作，直接查出全部就可以了，所以我就用了內(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í)
班級(jí)這里要根據(jù)獲取到的gid進(jìn)行查詢
public ListCla> findByGid(String gid){
return claDAO.findByGid(gid);
}
Controller層
//查詢所有年級(jí)信息
@RequestMapping("grace")
@ResponseBody
public ListGrace> grace(){
return graceService.findAll();
}
//根據(jù)年級(jí)的gid獲取班級(jí)信息
@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">
年級(jí)：
select v-on:change="claa()" v-model="gid">
option value="0">----請(qǐng)選擇年級(jí)--- /option>
option v-for="gra in grac" :value="gra.gid">{{gra.gname}}/option>
/select>
班級(jí)：
select>
option v-for="cl in cla">{{cl.cname}}/option>
/select>
/div>
js部分
var vm = new Vue({
el: '#app',
data:{
grac:[],
cla:[],
gid:0//可以讓年級(jí)的下拉框默認(rèn)選擇option value="0">----請(qǐng)選擇年級(jí)--- /option>項(xiàng)
},
mounted(){//頁(yè)面加載時(shí)開始加載下面的兩個(gè)方法
this.grace();//年級(jí)
this.claa();//班級(jí)，為了避免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)二級(jí)聯(lián)動(dòng)效果，希望對(duì)大家有所幫助！
標(biāo)簽：三沙 汕尾 七臺(tái)河 萊蕪 咸寧 棗莊 忻州 許昌
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《select下拉菜單實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果》，本文關(guān)鍵詞 select,下拉菜單,實(shí)現(xiàn),二級(jí),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
