<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<select name="select" id="se">
<option value="0">全部</option>
<option value="1">一班</option>
<option value="2">二班</option>
<option value="3">三班</option>
</select>
<div id="cla">
<ul id="first" style="background-color: #1287B3;">
<li>1:A</li>
<li>1:B</li>
<li>1:C</li>
</ul>
<ul id="second" style="background-color: skyblue;">
<li>2:A</li>
<li>2:B</li>
<li>2:C</li>
</ul>
<ul id="thid" style="background-color: khaki;">
<li>3:A</li>
<li>3:B</li>
<li>3:C</li>
</ul>
</div>
</body>
<script type="text/javascript">
var se1 = '<ul id="first" style="background-color: #1287B3;"><li>1:A</li><li>1:B</li><li>1:C</li></ul>';
var se2 = '<ul id="second" style="background-color: skyblue;"><li>2:A</li><li>2:B</li><li>2:C</li></ul>';
var se3 = '<ul id="thid" style="background-color: khaki;"><li>3:A</li><li>3:B</li><li>3:C</li></ul>';
$("#se").change(function() {
var selectText = $("#se").find("option:selected").val();
switch (selectText){
case "0": $("#cla").fadeOut(1000,0,function() {
$("#cla").html(se1+se2+se3);
$("#cla").fadeIn(1000);
});
break;
case "1":$("#cla").fadeOut(1000,0,function() {
$("#cla").html(se1);
$("#cla").fadeIn(1000);
});
break;
case "2":$("#cla").fadeOut(1000,0,function() {
$("#cla").html(se2);
$("#cla").fadeIn(1000);
});
break;
case "3":$("#cla").fadeOut(1000,0,function() {
$("#cla").html(se3);
$("#cla").fadeIn(1000);
});
break;
}
});
</script>
</html>