Select下拉框結合Ajax使用
阿新 • • 發佈:2019-01-23
常用情況1:
員工 與 部門 一對一,但是實體類沒有外來鍵關聯,員工中只記錄 部門id,編輯員工資訊時 部門要下拉框且預設顯示員工所在部門名稱(不是id)
1.
員工 與 部門 一對一,但是實體類沒有外來鍵關聯,員工中只記錄 部門id,編輯員工資訊時 部門要下拉框且預設顯示員工所在部門名稱(不是id)
1.
<select name="department" id="department" style="width:200px;"></select>
2.js3.後臺程式碼$(document).ready(function(){ loadDepartmentName(); }); function loadDepartmentName() { $.ajax({ url:"EmployeeInfoController.do?getComboTreeData", type:"get", success: function(data){ data = JSON.parse(data); var nameOpt = "<option value='' selected='selected'>--請選擇--</option>"; for(var i=0;i<data.length;i++) { if("${employeeInfo.department}"==data[i].id){ nameOpt+="<option value='"+data[i].id+"' selected='selected'>"+data[i].text+"</option>"; }else{ nameOpt+="<option value='"+data[i].id+"' >"+data[i].text+"</option>" } } $('#department').html(nameOpt); }, error: function(){} }); }
//@ResponseBody表示該方法的返回結果直接寫入HTTP response body中,一般在非同步獲取資料時使用 //在使用@RequestMapping後,返回值通常解析為跳轉路徑。加上@responsebody後,返回結果直接寫入HTTP response body中,不會被解析為跳轉路徑。//比如非同步請求,希望響應的結果是json資料,那麼加上@responsebody後,就會直接返回json資料。 @RequestMapping(params = "getComboTreeData") @ResponseBody public List<Map<String,Object>> getComboTreeData(){ List<Map<String,Object>> result = new ArrayList<Map<String,Object>>(); List<Department> department = commonService.loadAll(Department.class); for(int i = 0;i<department.size();i++){ Map<String,Object> obj = new HashMap<String,Object>(); obj.put("id", department.get(i).getId()); obj.put("text", department.get(i).getCode()); result.add(obj); } return result; }