easyui下拉框動態級聯載入的範例程式碼，easyui範例程式碼

easyui下拉框動態級聯載入的範例程式碼，easyui範例程式碼

easyui的下拉框動態載入資料，高校中要根據首先查詢所有學院，然後根據學院動態載入課程。下面看如何?。

1.介面效果

2. html + js代碼

<span>學院名稱：</span> <input class="easyui-combobox" style="width:30%;" id="collegeName"> <span>課程名稱：</span> <input class="easyui-combobox" style="width:30%;" id="courseName"><br/> 

$(function() {       // 下拉框選擇控制項，下拉框的內容是動態查詢資料庫資訊    $('#collegeName').combobox({         url:'${pageContext.request.contextPath}/loadInstitution',         editable:false, //不可編輯狀態        cache: false,        panelHeight: '150',        valueField:'id',          textField:'institutionName',             onHidePanel: function(){       $("#courseName").combobox("setValue",'');//清空課程       var id = $('#collegeName').combobox('getValue');           //alert(id);             $.ajax({       type: "POST",       url: '${pageContext.request.contextPath}/loadCourse?id=' + id,       cache: false,       dataType : "json",       success: function(data){       $("#courseName").combobox("loadData",data);            }         });           } });          $('#courseName').combobox({       //url:'itemManage!categorytbl',       editable:false, //不可編輯狀態      cache: false,      panelHeight: '150',//自動高度適合      valueField:'id',        textField:'courseName'      });     }); 

3.後台代碼

@RequestMapping("/loadInstitution")   /**    * 載入學院    * @param     * @param     * @return void    * @exception/throws [違例類型] [違例說明]    * @see     [類、類#方法、類#成員]    * @deprecated    */   public void loadInstitute(HttpServletRequest request,       HttpServletResponse response) throws Exception {     try {       JackJsonUtils JackJsonUtils = new JackJsonUtils();       List<Institution> institutionList = institutionBean           .queryAllColleage();       System.out.println("學院list大小=====" + institutionList.size());       String result = JackJsonUtils.BeanToJson(institutionList);       System.out.println(result);       JsonUtils.outJson(response, result);     } catch (Exception e) {       logger.error("載入學院失敗", e);     }   }    @RequestMapping("/loadCourse")   /**    * 動態載入課程    *    *    * @param     * @param     * @return void    * @exception/throws [違例類型] [違例說明]    * @see     [類、類#方法、類#成員]    * @deprecated    */   public void loadCourse(HttpServletRequest request,       HttpServletResponse response) throws Exception {     JackJsonUtils JackJsonUtils = new JackJsonUtils();     String id = request.getParameter("id");     System.out.println("學院id====" + id);     try {       if(id != null && id != ""){         List<CourseInfo> listCourseInfoList = courseBean             .queryAllCourseInfos(id);         System.out.println("課程list大小=====" + listCourseInfoList.size());         String result = JackJsonUtils.BeanToJson(listCourseInfoList);         System.out.println(result);         JsonUtils.outJson(response, result);       }     } catch (Exception e) {       logger.error("載入課程失敗", e);     }   }  

根據基礎提供的介面查詢學院和課程，轉換為json格式後綁定到前台控制項上。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。