您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何使用ajax實現(xiàn)下拉菜單的級聯(lián)操作,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
在開發(fā)中常常會遇到菜單的級聯(lián)操作,比如:國家、城市、鄉(xiāng)鎮(zhèn)的選擇等。當選中某個國家的時候,后面的菜單會把該國家內(nèi)的城市羅列出來,當選中城市的時候,后面的菜單會把對應的鄉(xiāng)鎮(zhèn)列出來。
解決這種菜單的級聯(lián)操作的辦法,我理解的有兩種:
①使用js來實現(xiàn),把頁面所用到的級聯(lián)數(shù)據(jù)放到js內(nèi),當頁面加載完成后,通過js顯示到對應的select內(nèi),這種方法的解決辦法有很多種,最為直觀的一種是放到多維數(shù)組中,每個人的思維不一樣,這里就不詳細解說。
②使用ajax異步動態(tài)加載,然后顯示到對應的select內(nèi),這種方法很便捷,建議在開發(fā)中使用。
下面看一個開發(fā)中的小例子:
JSP簡短頁面:
<div class="form-group"> <label class="col-sm-2 control-label">設備類別</label> <div class="col-sm-4"> <select class="basic-single" name="codeCategory" onchange="showCodeSubCate()" id="codeCategory" > </select> </div> <label class="col-sm-2 control-label">設備子類</label> <div class="col-sm-4"> <select class="basic-single" name="codeSubCategory" id="codeSubCate" disabled="disabled" > <option value="">--請選擇--</option> </select> </div> </div>
該頁面內(nèi)涉及到了兩個select,分別為:設備分類和設備子類,其中設備分類為一級菜單,設備子類為二級菜單,設備子類的顯示內(nèi)容由設備分類決定。
下面來看ajax代碼段:
function addCodeCategory(){ $.ajax({ url: "<%=request.getContextPath()%>/facilitydict/showCodeCategory", async: false, //請求是否異步,默認為異步,這也是ajax重要特性 type: "GET", //請求方式 success: function(result) { result = $.parseJSON(result); var data = result.data; var codeCates = data.split(","); str ='<option value="6801">--請選擇--</option>'; for(x in codeCates){ str+='<option value="'+codeCates[x]+'">'+codeCates[x]+'</option>'; } $("#codeCategory").html(str); } }); } function showCodeSubCate(){ $("#codeSubCate").prop("disabled","");//將設備子類的select解除鎖定 var target = $("#codeCategory option:selected").text(); $.ajax({ url: "<%=request.getContextPath()%>/facilitydict/showCodeSubCategory", data : {codeCategory:target}, async: false, //請求是否異步,默認為異步,這也是ajax重要特性 type: "GET", //請求方式 success: function(result) { result = $.parseJSON(result); var data = result.data; var codeCates = data.split(","); var str=""; for(x in codeCates){ str+='<option value="'+codeCates[x]+'">'+codeCates[x]+'</option>'; } $("#codeSubCate").html(str); } }); }
不難看出,當設備分類選擇器內(nèi)的內(nèi)容發(fā)生改變后,觸發(fā)showCodeSubCate函數(shù)來請求后臺獲取數(shù)據(jù),然后把請求到的數(shù)據(jù)添加到設備子類對應的select內(nèi)。后臺代碼的實現(xiàn)如下(只貼出controller的方法):
@RequestMapping("/showCodeCategory") @ResponseBody public Result<String> searchCodeCategory() { Result<String> rs = new Result<>(); List<String> codeCategorys = facilityDictService.searchCodeCategory(); String codeCate = StringUtil.collectionToCommaDelimitedString(codeCategorys); rs.setData(codeCate); return rs; } @RequestMapping("/showCodeSubCategory") @ResponseBody public Result<String> searchCodeSubCategory(HttpServletRequest request) { String codeCategory = request.getParameter("codeCategory"); Result<String> rs = new Result<>(); List<String> codeSubCategorys = facilityDictService.searchCodeSubCategory(codeCategory); String codeCate = StringUtil.collectionToCommaDelimitedString(codeSubCategorys); rs.setData(codeCate); return rs; }
這兩個方法分別對應上面的兩個ajax請求,值得介紹的是后臺返回的數(shù)據(jù),返回值類型為Result<String>,該返回值類型是一個工具類,具體實現(xiàn)可以在我的博客中查看,鏈接為:http://www.cnblogs.com/blog411032/p/5799669.html
ajax與后臺交互傳輸數(shù)據(jù)的工具類
public class Result<T> implements Serializable { private static final long serialVersionUID = 3637122497350396679L; private boolean success; private T data; private String msg; public Result() { } public Result(boolean success) { this.success = success; } public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public T getData() { return data; } public void setData(T data) { this.data = data; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public Result(boolean success, String msg) { super(); this.success = success; this.msg = msg; } public Result(boolean success, T data) { super(); this.success = success; this.data = data; } }
該類為前后臺交互提供了非常大的便捷:
下面是前后臺的ajax交互:
前臺ajax代碼:
$.ajax({ url: "<%=request.getContextPath()%>/supp/deleteSupp", data : {supplierId:supplierId}, async: false, //請求是否異步,默認為異步,這也是ajax重要特性 type: "GET", //請求方式 success: function(data) { var rs = eval('('+data+')'); flag = rs.success; if(flag){ alert("刪除成功!"); } } });
下面是后臺java代碼:
@RequestMapping("/deleteSupp") @ResponseBody public Result<String> deleteSupplier(HttpServletRequest request){ Result<String> rs = new Result<>(); String supplierId = request.getParameter("supplierId"); supplierService.deleteSupplierById(supplierId); rs.setSuccess(true); return rs; }
感謝你能夠認真閱讀完這篇文章,希望小編分享的“如何使用ajax實現(xiàn)下拉菜單的級聯(lián)操作”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。