下拉菜单的级联操作-js tutoriel-php.cn

这篇文章主要为大家详细介绍了下拉菜单的级联操作，分享了ajax与后台交互传输数据的工具类，感兴趣的小伙伴们可以参考一下

在开发中常常会遇到菜单的级联操作，比如：国家、城市、乡镇的选择等。当选中某个国家的时候，后面的菜单会把该国家内的城市罗列出来，当选中城市的时候，后面的菜单会把对应的乡镇列出来。

解决这种菜单的级联操作的办法，我理解的有两种：

①使用js来实现，把页面所用到的级联数据放到js内，当页面加载完成后，通过js显示到对应的select内，这种方法的解决办法有很多种，最为直观的一种是放到多维数组中，每个人的思维不一样，这里就不详细解说。

②使用ajax异步动态加载，然后显示到对应的select内，这种方法很便捷，建议在开发中使用。

下面看一个开发中的小例子：

JSP简短页面：

设备类别

设备子类

Copier après la connexion

该页面内涉及到了两个select，分别为：设备分类和设备子类，其中设备分类为一级菜单，设备子类为二级菜单，设备子类的显示内容由设备分类决定。

下面来看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 =''; for(x in codeCates){ str+=''; } $("#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+=''; } $("#codeSubCate").html(str); } }); }

Copier après la connexion

不难看出，当设备分类选择器内的内容发生改变后，触发showCodeSubCate函数来请求后台获取数据，然后把请求到的数据添加到设备子类对应的select内。后台代码的实现如下（只贴出controller的方法）：

@RequestMapping("/showCodeCategory") @ResponseBody public Result searchCodeCategory() { Result rs = new Result<>(); List codeCategorys = facilityDictService.searchCodeCategory(); String codeCate = StringUtil.collectionToCommaDelimitedString(codeCategorys); rs.setData(codeCate); return rs; } @RequestMapping("/showCodeSubCategory") @ResponseBody public Result searchCodeSubCategory(HttpServletRequest request) { String codeCategory = request.getParameter("codeCategory"); Result rs = new Result<>(); List codeSubCategorys = facilityDictService.searchCodeSubCategory(codeCategory); String codeCate = StringUtil.collectionToCommaDelimitedString(codeSubCategorys); rs.setData(codeCate); return rs; }

Copier après la connexion

这两个方法分别对应上面的两个ajax请求，值得介绍的是后台返回的数据，返回值类型为Result ，该返回值类型是一个工具类，具体实现可以在我的博客中查看，链接为：http://www.cnblogs.com/blog411032/p/5799669.html

ajax与后台交互传输数据的工具类

public class Result 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; } }

Copier après la connexion

该类为前后台交互提供了非常大的便捷：

下面是前后台的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("删除成功!"); } } });

Copier après la connexion

下面是后台java代码：

@RequestMapping("/deleteSupp") @ResponseBody public Result deleteSupplier(HttpServletRequest request){ Result rs = new Result<>(); String supplierId = request.getParameter("supplierId"); supplierService.deleteSupplierById(supplierId); rs.setSuccess(true); return rs; }

Copier après la connexion

上面是我整理给大家的，希望今后会对大家有帮助。

AJAX显示加载中并弹出图层遮挡页面的实现示例

Ajax提交Form表单页面仍会刷新问题的快速解决办法

ajax快速解决参数过长无法提交成功的问题

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!