<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-5-1</title>
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $bb=$("#bb");//=$("#bb").remove();
var $cc=$("#cc").remove();
var $dd=$("#dd").remove();
var va;
$("#yy").change(function(){
if(this.value=="bb"){
$bb.appendTo("#aa"); //$bb.appendTo("#aa"); 即使是多次重复的插入，结果还是不变的。什么？？
if(va=="cc"){
$cc=$("#cc").remove();
}else if(va=="dd"){
$dd=$("#dd").remove();
}
}else if(this.value=="cc"){
$cc.appendTo("#aa");
if(va=="bb"||va==""){
$bb=$("#bb").remove();
}else if(va=="dd"){
$dd=$("#dd").remove();
}
}else if(this.value=="dd"){
if(va=="bb"||va==""){
$bb=$("#bb").remove();
}else if(va=="cc"){
$cc=$("#cc").remove();
}
$dd.appendTo("#aa");
}else if(this.value==""){
if(va=="bb"){
}else {
$bb.appendTo("#aa");
if(va=="cc") {
$cc=$("#cc").remove();
}else if(va=="dd"){
$dd=$("#dd").remove();
}
}
}
})
$("#yy").click(function(){
va=this.value;
})
});
</script>
</head>
<body>
<select id="yy">
<option value="" selected >-----</option>
<option value="bb" >bb</option>
<option value="cc" >cc</option>
<option value="dd">dd</option>
</select>
<table>
<tr id="aa">
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr id="bb">
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr id="cc">
<td>cc</td>
<td>cc</td>
<td>cc</td>
</tr>
<tr id="dd">
<td>dd</td>
<td>dd</td>
<td>dd</td>
</tr>
<tr id="ee">
<td>EE</td>
<td>EE</td>
<td>EE</td>
</tr>
</table>
</body>
</html>
?