??????????????????????????ü???????????????????????????????дjson???????????????д??json?????????????????????????????洢???????????????????鷳?????????????ü??????????????jquery?????????????????????ε??????????????
????????????д?????С?????
????(1)?????????С?????
????????????????jquery.js???????????????????????ο?????????????????????
??????????????????????????ж?????????????????????ж???????????????????????????????????????????????δ????????????????????????????????
???????磺
????????????????????????繤???  ?????????java1??java2?? ???繤????????1??????2??
?????????????????????????????? ???????в???1??????2??  ???????????1??????2??
????..............
????(2)jsp????

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<meta charset="UTF-8">
<!-- ????jquery -->
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form action="">
??:
<select name="college" id="college">
<option value="0" selected="selected">???????</option>
<option value="1">?????</option>
<option value="2">???????</option>
</select>
<br><br>
??:
<select name="department" id="department">
<option value="0">???????</option>
</select>
<br><br>
??:
<select name="classes" id="classes">
<option value="0">??????</option>
</select>
<br><br>
<input type="submit" value="ok">
</form>
<script type="text/javascript">
$(function(){
//??“??”????????????????????????????
$("#college").change(function(){
var collegeVal = $("#college").val();
if(collegeVal == '0'){
$("#department").empty();
$("#department").append('<option value="0" selected="selected">???????</option>');
}else if(collegeVal == '1'){
$("#department").empty();
$("#department").append('<option value="0" selected="selected">???????</option>');
$("#department").append('<option value="1">???????</option>');
$("#department").append('<option value="2">???繤??</option>');
}else if(collegeVal == '2'){
$("#department").empty();
$("#department").append('<option value="0" selected="selected">???????</option>');
$("#department").append('<option value="1">??????</option>');
$("#department").append('<option value="2">?????</option>');
}else{
}
});
//??“??”???????????????????????????
$("#department").change(function(){
var departmentVal = $("#department").val();
var collegeVal = $("#college").val();
if(departmentVal == '1' && collegeVal == '1'){
$("#classes").empty();
$("#classes").append('<option value="0">??????</option>');
$("#classes").append('<option>java1??</option>');
$("#classes").append('<option>java2??</option>');
}else if(departmentVal == '2' && collegeVal == '1'){
$("#classes").empty();
$("#classes").append('<option value="0">??????</option>');
$("#classes").append('<option>????1??</option>');
$("#classes").append('<option>????2??</option>');
}else if(departmentVal == '1' && collegeVal == '2'){
$("#classes").empty();
$("#classes").append('<option value="0">??????</option>');
$("#classes").append('<option>????1??</option>');
$("#classes").append('<option>????2??</option>');
}else if(departmentVal == '2' && collegeVal == '2'){
$("#classes").empty();
$("#classes").append('<option value="0">??????</option>');
$("#classes").append('<option>????1??</option>');
$("#classes").append('<option>????2??</option>');
}
else{
$("#classes").empty();
$("#classes").append('<option value="0" selected="selected">??????</option>');
}
});
});
</script>
</body>
</html>