<!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); }