下拉菜单的级联操作（ajax）

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

解决这种菜单的级联操作的办法，我理解的有两种：
①使用js来实现，把页面所用到的级联数据放到js内，当页面加载完成后，通过js显示到对应的select内，这种方法的解决办法有很多种，最为直观的一种是放到多维数组中，每个人的思维不一样，这里就不详细解说。
②使用ajax异步动态加载，然后显示到对应的select内，这种方法很便捷，建议在开发中使用。
下面看一个开发中的小例子：

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" style="width: 100%"></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" style="width: 100%"><option value="">--请选择--</option></select></div>
</div>

该页面内涉及到了两个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 ="<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）;}}）;}

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

@RequestMapping（"/showCodeCategory"）@ResponseBodypublic 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"）@ResponseBodypublic 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请求，值得介绍的是后台返回的数据，返回值类型为Result<String>，该返回值类型是一个工具类，具体实现可以在我的博客中查看，链接为：http://www.cnblogs.com/blog411032/p/5799669.html
ajax与后台交互传输数据的工具类

 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"）@ResponseBodypublic Result<String> deleteSupplier（HttpServletRequest request）{Result<String> rs = new Result<>（）;String supplierId = request.getParameter（"supplierId"）;supplierService.deleteSupplierById（supplierId）;rs.setSuccess（true）;return rs;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。