<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
type : 'GET',
url : 'BigServlet',
dataType : 'json',
//响应成功，调用回调函数，回调函数中的参数data==返回的数据
success : function(data) {
$("#bigClass").append("<option value='-1'>请选择</option>");
//遍历数据
$.each(data,function(index,msg){
$("#bigClass").append("<option value="+msg.id+">"+msg.catename+"</option>");
});
},
//相应失败，调用回调函数
error:function(){
alert("请求大分类数据失败");
}
});
联动小分类
$("#bigClass").change(function(){
//获取选中的option的value值
var cateId=$("#bigClass option:selected").val();
if(cateId!="-1"){
getSub(cateId);
}else{
alert("请选择大分类");
}
});
//获取小分类
function getSub(cateId){
$.ajax({
type:'POST',
url:'SmallServlet',
data:{cateId:cateId},
dataType:'json',
success:function(data){
//遍历json数据
//先清空小分类里的所有option选项
$("#smallClass").empty();
$("#smallClass").append("<option value='-1'>请选择</option>");
$.each(data,function(index,sub){
$("#smallClass").append("<option value="+sub.id+">"+sub.catesname+"</option>");
});
},
error:function(){
alert("请求小分类数据失败");
}
});
}
});
</script>
</head>
<body>
大分类<select id="bigClass"></select>
小分类<select id="smallClass"></select>
</body>
</html>
11-03
885
885
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
