这次给大家带来ajax的下拉菜单级联操作，ajax下拉菜单级联操作的注意事项有哪些，下面就是实战案例，一起来看一下。
在开发中常常会遇到菜单的级联操作，比如：国家、城市、乡镇的选择等。当选中某个国家的时候，后面的菜单会把该国家内的城市罗列出来，当选中城市的时候，后面的菜单会把对应的乡镇列出来。
解决这种菜单的级联操作的办法，我理解的有两种：
①使用js来实现，把页面所用到的级联数据放到js内，当页面加载完成后，通过js显示到对应的select内，这种方法的解决办法有很多种，最为直观的一种是放到多维数组中，每个人的思维不一样，这里就不详细解说。
②使用ajax异步动态加载，然后显示到对应的select内，这种方法很便捷，建议在开发中使用。
下面看一个开发中的小例子：
jsp简短页面：
<p class="form-group">
<label class="col-sm-2 control-label">设备类别</label>
<p class="col-sm-4">
<select class="basic-single" name="codecategory" onchange="showcodesubcate()" id="codecategory" style="width: 100%">
</select>
</p>
<label class="col-sm-2 control-label">设备子类</label>
<p class="col-sm-4">
<select class="basic-single" name="codesubcategory" id="codesubcate" disabled="disabled" style="width: 100%">
<option value="">--请选择--</option>
</select>
</p>
</p>
该页面内涉及到了两个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)
@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请求，值得介绍的是后台返回的数据，返回值类型为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)
@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+mysq实现省市区三级联动列表
ajax传输json和xml数据步奏详解（附代码）
以上就是ajax的下拉菜单级联操作的详细内容。