點擊右邊

select下柏青拉菜單完成二級聯動結果

需求:確立年級、班級兩個數據表,獵取年級表信息,依據年級,獵取響應的班級

結果圖:

不完善之處便是在不選擇年級的時辰,是不克不及選擇任何班級的。

代碼部門

起首是確立兩個表的實體

必要注重的便是寫表明了。代碼就不貼了。

DAO層代碼

年級DAO

年級的DAO層沒甚么代碼,便是承繼那三個類,詳細用到哪一個我也不清晰,就間接都承繼了。

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

班級DAO

班級DAO內里就這一行代碼,用的是內置的findB六合彩即時y要領,我麻將王換現金的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.findq8娛樂城ByGid(gid);
}

Controller層

//查問一切年級信息
@RequestMapping(“大眾grace”大眾)
@ResponseBody
publi線上麻將朋友c 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>
年級:
<select大樂透中2個號碼多少錢 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下拉菜單完成二級聯動結果,但愿對人人有所輔助!

【免責聲明】本站內容轉載自互聯網,其相關談吐僅代表作者小我私家概念盡非權勢巨子,不代表本站態度。如您發明內容存在版權成績,請提交相關鏈接至郵箱:,咱們將實時予以處置。