本次采用ssm框架做页面上的三级联动
代码如下:
JavaScript代码:
<script type="text/javascript">
$(function(){
$("#typeb").empty(); //再次选中是清空
$("#typec").empty();
$.post(
"thresslevel",
{tid:1},
function(obj){
//alert(obj);
for(var i in obj){
$("#typea").append("<option value='"+obj[i].id+"'>"+obj[i].tname+"</option>");
}
},"json"
); //
$("#typea").change(function(){
var typeaid = $(this).val();
$("#typeb")[0].length=1; //确保默认的option不被清空
$("#typec")[0].length=1;
alert(typeaid);
$("#typec").empty();
$.post(
"thresslevel",
{tid:typeaid},
function(obj){
//alert(obj);
for(var i in obj){
$("#typeb").append("<option value='"+obj[i].id+"'>"+obj[i].tname+"</option>");
}
},"json"
);
}); //
$("#typeb").change(function(){
var typebid=$(this).val();
$("#typec")[0].length=1;
alert(typebid);
$.post(
"thresslevel",
{tid:typebid},
function(obj){
//alert(obj);
for(var i in obj){
$("#typec").append("<option value='"+obj[i].id+"'>"+obj[i].tname+"</option>");
}
},"json"
);
});
});
</script>
jsp代码:
<form method="post">
<table width="300px" >
<tr>
<td>商品名称:<input type="text" name="name"></td>
</tr>
<tr>
<td>商品价格:<input type="text" name="price"></td>
</tr>
<tr>
<td>商品描述:<input type="text" name="content"></td>
</tr>
<tr>
<td>商品类型:
<select id="typea">
<option value='-1'>请选择</option>
</select>
</td>
<td>
<select id="typeb">
<option value='-1'>请选择</option>
</select>
</td>
<td>
<select id="typec" name="tid">
<option value='-1'>请选择</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="新增"></td>
</tr>
</table>
</form>
至于后台代码那就是一条sql语句的事