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

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

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

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

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

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

JSP简短页面：

设备类别

设备子类

--请选择--

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

下面来看ajax代码段：

function addCodeCategory(){

$.ajax({

url: "/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+=''+codeCates[x]+'';

}

$("#codeCategory").html(str);

}

});

}

function showCodeSubCate(){

$("#codeSubCate").prop("disabled","");//将设备子类的select解除锁定

var target = $("#codeCategory option:selected").text();

$.ajax({

url: "/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+=''+codeCates[x]+'';

}

$("#codeSubCate").html(str);

}

});

}

不难看出，当设备分类选择器内的内容发生改变后，触发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;

}

这两个方法分别对应上面的两个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;

}

}

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

下面是前后台的ajax交互：

前台ajax代码：

$.ajax({

url: "/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 deleteSupplier(HttpServletRequest request){

Result rs = new Result<>();

String supplierId = request.getParameter("supplierId");

supplierService.deleteSupplierById(supplierId);

rs.setSuccess(true);

return rs;

}

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