快捷導(dǎo)航

select下拉菜單實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果

更新時(shí)間：2019年10月27日 15:16:35 作者：生花脫穎

這篇文章主要介紹了select下拉菜單實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果，在一些項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)遇到這樣的需求，今天小編通過(guò)實(shí)例代碼給大家講解，需要的朋友可以參考下

需求：建立年級(jí)、班級(jí)兩個(gè)數(shù)據(jù)表，獲取年級(jí)表信息，根據(jù)年級(jí)，獲取相應(yīng)的班級(jí)

效果圖：

不完美的地方就是在不選擇年級(jí)的時(shí)候，是不能選擇任何班級(jí)的。

代碼部分

首先是建立兩個(gè)表的實(shí)體

需要注意的就是寫(xiě)注解了。代碼就不貼了。

DAO層代碼

年級(jí)DAO

年級(jí)的DAO層沒(méi)什么代碼，就是繼承那三個(gè)類(lèi)，具體用到哪個(gè)我也不清楚，就直接都繼承了。

public interface GraceDAO extends PagingAndSortingRepository<Grace, String>,JpaSpecificationExecutor<Grace>,JpaRepository<Grace, String>
{ 
}

班級(jí)DAO

班級(jí)DAO里面就這一行代碼，用的是內(nèi)置的findBy方法，我的gid在數(shù)據(jù)庫(kù)中是int型，在這里為了方便用的string型（我的可以實(shí)現(xiàn)操作，不可以的話強(qiáng)制轉(zhuǎn)型成int就可以了，問(wèn)題不大）

List<Cla> findByGid(String gid);

service層

年級(jí)

年級(jí)這里不需要有什么操作，直接查出全部就可以了，所以我就用了內(nèi)置的findAll方法

@Service
public class GraceService {
 @Autowired
 private GraceDAO graceDAO;
 public List<Grace> findAll(){
 return graceDAO.findAll();
 }
}
///////下面是內(nèi)置findAll方法的注釋什么的。用不到，只是貼出來(lái)給大家看一下
/*
 * (non-Javadoc)
 * @see org.springframework.data.repository.CrudRepository#findAll()
 */
 List<T> findAll();

班級(jí)

班級(jí)這里要根據(jù)獲取到的gid進(jìn)行查詢

public List<Cla> findByGid(String gid){
 return claDAO.findByGid(gid);
 }

Controller層

//查詢所有年級(jí)信息
@RequestMapping("grace")
@ResponseBody
public List<Grace> grace(){
 return graceService.findAll();
}
//根據(jù)年級(jí)的gid獲取班級(jí)信息
@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">
年級(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í)開(kāi)始加載下面的兩個(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ì)大家有所幫助！

您可能感興趣的文章: