select下拉框二级联动

下拉框deviceType选择选项后，触发getSubs()事件，调用ajax把选项id传给后台，前台再接收选项id对应的Sub给Sub;

________________________________________________________________________________

jsp:

.......

<select id="deviceType" name="deviceType" onchange="getSubs()">

<option value="">请选择</option>

<c:forEach var="dev" items="${Devlist}" varStatus="s">

<option value="${dev.ID}" >${dev.NAME}</option>

</c:forEach>

</select>

<select id="Sub" name="Sub" >

<option value="">请选择</option>
</select>

......

________________________________________________________________________________

js:

......

function getSubs(){//通过设备类型下拉框联动部位下拉框
var parentId = $("#deviceType").val();
var url="${pageContext.request.contextPath}/biz/common/deviceDefect.do?action=getSub";//请求后台的url
$("#Sub").empty();//先置空
$("#Sub").append($('<option value="">请选择</option>'));//加上--请选择--选项
if(parentId=="")
return;//无值，返回
url+="&parentId="+parentId;//url参数
$.ajax({
type: 'post',
dataType: 'json',
url: url,
success: function(data){
var mydata=data;
$.each(mydata,function(index,entity){
$("#Sub").append($('<option value="'+entity.ID+'">'+entity.NAME+'</option>'));//后台数据加到下拉框
});
},
error: function(){
}
});
}

.....

________________________________________________________________________________

deviceDefect后台代码：

.......

//通过设备类型筛选缺陷部位
public void getSub(HttpServletRequest request,
HttpServletResponse response){
int DEVICE_TYPE_ID = Integer.parseInt(request.getParameter("parentId"));
List<DataRecord> Sublist = dynservice.getDevType(DEVICE_TYPE_ID);//该接口根据id返回对应的一个list
JSONArray json = JSONArray.fromObject(Sublist);
try {
response.getWriter().write(json.toString());
} catch (IOException e) {
e.printStackTrace();
}
}

...

________________________________________________________________________________

ps：三级联动道理相同。