<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script> <script> //ajax+select三種常用交互方式 window.onload=function(){ test(); } function test(){ alert("執行"); var start = 0; var size=100; var headNo = "111111"; $.ajax({ type : "post", url : "/ssm_pms/admin_group/list", //此次url改為真正需要的url data : {"headNo":headNo, "start":start, "size":size }, dataType : 'json', success : function(data) { loadData(data.hotelChainList); },error:function(){ alert("error"); } }); var loadData=function(list){ for (var i = 0; i < list.length; i++) { $("#hotelNo").append("<option value="+list[i].hotels[0].hotelNo+">"+list[i].hotels[0].hotelName+"</option>") } } /* $.ajax({ type : "post", url : "/ssm_pms/admin_group/list", //此次url改為真正需要的url data : {"headNo":headNo, "start":start, "size":size }, dataType : 'json', success : function(data) { $.each(data.hotelChainList, function(index, item) { $("#hotelNo").append( //此處向select中循環綁定數據 "<option value="+item.hotels[0].hotelNo+">" + item.hotels[0].hotelName+ "</option>"); }); }, }); */ /* $.ajax({ type : "post", url :"/ssm_pms/admin_group/list", //此次url改為真正需要的url data : {"headNo":headNo, "start":start, "size":size }, dataType : 'json', success : function(data) { alert(data.returnMsg); var list = data.hotelChainList; for (var i = 0; i < list.length; i++) { alert(list[i].hotels[0].hotelNo) $("#hotelNo").append("<option value='1'>"+list[i].hotels[0].hotelName+"</option>") } },error:function(){ alert("error"); } }); */ } </script> </head> <body> <select id="hotelNo"> <option>請選擇酒店</option> </select> </body> </html>
上述三種方式，本人親試有效，這個是比較常用的，特別是前后端交互，就拿酒店管理系統而言，部門員工等就涉及到下拉框聯動，當然還有很多應用場景。
后台代碼為Java代碼，SpringMVC，這是web層框架，也是現在比較常用的，非常有名的。
SpringMVC代碼為:
/** * 查詢集團下酒店店長信息及其角色信息 * @param start * @param size * @param headNo * @param map * @return */ @PostMapping(value="managerList",produces="application/json;charset=utf-8") @ResponseBody public String managerList(Integer start,Integer size,String headNo,Map<String,Object> map) { //角色編號為3 店長 String roleNo="3"; map.put("headNo", headNo); map.put("roleNo", roleNo); map.put("start", start); map.put("size", size); //調用查詢集團下酒店店長信息及其角色信息集合方法 List<HotelChain> hotelChainList = hotelChainService.selectManagerInfoList(map); int lines = hotelChainService.selectManagerCount(map); //調用查詢集團下酒店店長信息及其角色信息總數方法 Map<String,Object> returnMap = new HashMap<String,Object>(); //根據判斷結果返回不同結果集 if(lines!=0 && hotelChainList.size()!=0) { returnMap.put("hotelChainList", hotelChainList); returnMap.put("lines", lines); returnMap.put("returnCode", "000000"); returnMap.put("returnMsg", "獲取到數據"); }else { returnMap.put("returnCode", "111111"); returnMap.put("returnMsg", "沒有獲取到數據"); } return JSON.toJSONString(returnMap); }