select下拉菜單實現(xiàn)二級聯(lián)動效果

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

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

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

效果圖：

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

代碼部分

首先是建立兩個表的實體

需要注意的就是寫注解了。代碼就不貼了。

DAO層代碼

年級DAO

年級的DAO層沒什么代碼，就是繼承那三個類，具體用到哪個我也不清楚，就直接都繼承了。

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

班級DAO

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

List<Cla> findByGid(String gid);

service層

年級

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

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

班級

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

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

Controller層

//查詢所有年級信息
@RequestMapping("grace")
@ResponseBody
public List<Grace> grace(){
 return graceService.findAll();
}
//根據(jù)年級的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//可以讓年級的下拉框默認(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下拉菜單實現(xiàn)二級聯(lián)動效果，希望對大家有所幫助！

您可能感興趣的文章: