二级下拉ajax模板

在jsp文件中写：

<script type="text/javascript" src="resources/js/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="resources/js/IndustrySelectList.js"></script>

<input id="hdid" name="hdid" value="${queryinfo.pIndustryId}"  type="hidden" /> <!-- 页面翻页后，保存行业大分类下拉列表中选中的信息 -->
<input id="hiid" name="hiid" value="${queryinfo.industryId}"  type="hidden" /> <!-- 页面翻页后，保存行业小分类下拉列表中选中的信息 -->

行业大类和行业小类

<form:select path="pIndustryId"></form:select> &nbsp; <form:select path="industryId"><option value="">请选择</option></form:select>

IndustrySelectList.js

/**

 * 文件说明：本文件用于行业选择，级联下拉列表。 
 * 表单组件：大分类select组件ID: pIndustryId；小分类select组件ID: industryId 
 * 表单隐藏域： 
 * <input id="hdid" name="hdid" value="${project.pIndustryId}" type="hidden" /> <!-- 默认选中行业大分类下拉列表中选中的信息 --> 
 * <input id="hiid" name="hiid" value="${project.industryId}" type="hidden" /> <!-- 默认选中行业小分类下拉列表中选中的信息 -->
 * 用于保存传递过来的地区信息，根据这些信息，置为选中项。
 */
var getpiurl = "select/pIndustry";
// 获取行业大分类列表，页面加载后立即请求
$(document).ready(
function() {
var hp = $("#hdid").val();
if (hp.length == 1) {
hp = '0' + hp
}
$.ajax({
url : getpiurl, // 为请求的url
type : "get", // get请求方式
dataType : "json",
success : function(msg) { // 其中msg是服务器上返回的数据，可以alert查看一下
// var tmp=eval(msg); //将字符串转化成为Json数组
var str = "<option value=''>请选择</option>";
$.each(msg, function(i, item) {
// alert("name:"+item.id+",value:"+item.name);
if (hp == item.id) {
str = str + "<option selected='selected' value='" + item.id + "'>" + item.name + "</option>";
} else {
str = str + "<option value='" + item.id + "'>" + item.name + "</option>";
}
});
// alert(str);
$("#pIndustryId").append(str);
}
});


if (hp != '') {
var hi = $("#hiid").val();
if (hi.length == 1) {
hi = '0' + hi
}
$.ajax({
url : "select/Industry/" + hp, // 为请求的url
type : "get", // get请求方式
dataType : "json",
success : function(msg) { // 其中msg是服务器上返回的数据，可以alert查看一下
// var tmp=eval(msg); //将字符串转化成为Json数组
var str = "<option value=''>请选择</option>";
$.each(msg, function(i, item) {
// alert("name:"+item.id+",value:"+item.name);
if (hi == item.id) {
str = str + "<option selected='selected' value='" + item.id + "'>" + item.name + "</option>";
} else {
str = str + "<option value='" + item.id + "'>" + item.name + "</option>";
}
});
// alert(str);
$("#industryId").empty();
$("#industryId").append(str);
}
});
}
});


// 行业小分类，行业大分类选中后，动态请求加载
$("#pIndustryId").change(function() {
if ($("#pIndustryId").val() == '') {
var str = "<option value=''>请选择</option>";
$("#industryId").empty();
$("#industryId").append(str);
return;
}
$.ajax({
url : "select/Industry/" + $("#pIndustryId").val(), // 为请求的url
type : "get", // get请求方式
dataType : "json",
success : function(msg) { // 其中msg是服务器上返回的数据，可以alert查看一下
// var tmp=eval(msg); //将字符串转化成为Json数组
var str = "<option value=''>请选择</option>";
$.each(msg, function(i, item) {
// alert("name:"+item.id+",value:"+item.name);
str = str + "<option value='" + item.id + "'>" + item.name + "</option>";
});
// alert(str);
$("#industryId").empty();
$("#industryId").append(str);
}
});

});

control.java

/**
* 获取行业大分类
* 
* @return
*/
@RequestMapping(value = "/pIndustry", method = {RequestMethod.POST,RequestMethod.GET})
@ResponseBody
public List<TRClassify> getIndustry() {
TRClassifyExample classifyExample = new TRClassifyExample();
classifyExample.createCriteria().andFlagEqualTo(0);
List<TRClassify> industryList = classifyService.selectByExample(classifyExample);
return industryList;
}


/**
* 获取行业小分类
* 
* @return
*/
@RequestMapping(value = "/Industry/{pid}", method = {RequestMethod.POST,RequestMethod.GET})
@ResponseBody
public List<TRClassify> getIndustry(@PathVariable(value = "pid") Integer pid) {
TRClassifyExample classifyExample = new TRClassifyExample();
classifyExample.createCriteria().andFlagEqualTo(1).andPidEqualTo(pid);
List<TRClassify> industryList = classifyService.selectByExample(classifyExample);
return industryList;
}