求一个简单点的,根据下拉列表内容,在jsp页面输出List的一个小项目
问题描述:
我还是个菜鸟,求给的东西简单易懂,有一些介绍是最好的。谢谢!
答
<script>
function showList()
{
document.getElementById("div0").style.display = "none";
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
if(document.getElementById("dishType").value==0)
{
document.getElementById("div0").style.display = "block";
}
if(document.getElementById("dishType").value==1)
{
document.getElementById("div1").style.display = "block";
}
if(document.getElementById("dishType").value==2)
{
document.getElementById("div2").style.display = "block";
}
}
</script>
<html>
<head>
<title>根据菜系点餐</title>
</head>
<body>
<br>
<br>
<div align="center"><h1>请选择菜系:</h1></div>
<br>
<div align="center">
<select id="dishType" name="dishType" style="width:300px;height:30px" onchange="javascript:showList();">
<option value=0 selected></option>
<option value=1>湘菜</option>
<option value=2>川菜</option>
</select>
</div>
<hr/>
<br>
<br>
<br>
<br>
<div id="div0">
<table align="center" width="500px" border="1">
<tr>
<td width="20%" height="30px">序号</td>
<td width="40%" height="30px">菜名</td>
<td width="40%" height="30px">价格</td>
</tr>
</table>
</div>
<div id="div1" style="display:none">
<table align="center" width="500px" border="1">
<tr>
<td width="20%" height="30px">序号</td>
<td width="40%" height="30px">菜名</td>
<td width="40%" height="30px">价格</td>
</tr>
<tr>
<td width="20%" height="30px">1</td>
<td width="40%" height="30px">小炒肉</td>
<td width="40%" height="30px">28元</td>
</tr>
<tr>
<td width="20%" height="30px">2</td>
<td width="40%" height="30px">毛家红烧肉</td>
<td width="40%" height="30px">48元</td>
</tr>
<tr>
<td width="20%" height="30px">3</td>
<td width="40%" height="30px">腊味合蒸</td>
<td width="40%" height="30px">38元</td>
</tr>
</table>
</div>
<div id="div2" style="display:none">
<table align="center" width="500px" border="1">
<tr>
<td width="20%" height="30px">序号</td>
<td width="40%" height="30px">菜名</td>
<td width="40%" height="30px">价格</td>
</tr>
<tr>
<td width="20%" height="30px">1</td>
<td width="40%" height="30px">麻婆豆腐</td>
<td width="40%" height="30px">18元</td>
</tr>
<tr>
<td width="20%" height="30px">2</td>
<td width="40%" height="30px">水煮肉片</td>
<td width="40%" height="30px">38元</td>
</tr>
<tr>
<td width="20%" height="30px">3</td>
<td width="40%" height="30px">宫保鸡丁</td>
<td width="40%" height="30px">28元</td>
</tr>
</table>
</div>
<div id="div3" style="display:none"></div>
<div id="div4" style="display:none"></div>
</body>
</html>
答
function showList()
{
document.getElementById("div0").style.display = "none";
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
if(document.getElementById("dishType").value==0)
{
document.getElementById("div0").style.display = "block";
}
if(document.getElementById("dishType").value==1)
{
document.getElementById("div1").style.display = "block";
}
if(document.getElementById("dishType").value==2)
{
document.getElementById("div2").style.display = "block";
}
}
根据菜系点餐
湘菜
川菜
根据菜系点餐
请选择菜系:
湘菜
川菜
<div id="div0">
<table align="center" width="500px" border="1">
<tr>
<td width="20%" height="30px">序号</td>
<td width="40%" height="30px">菜名</td>
<td width="40%" height="30px">价格</td>
</tr>
</table>
</div>
<div id="div1" style="display:none">
<table align="center" width="500px" border="1">
<tr>
<td width="20%" height="30px">序号</td>
<td width="40%" height="30px">菜名</td>
<td width="40%" height="30px">价格</td>
</tr>
<tr>
<td width="20%" height="30px">1</td>
<td width="40%" height="30px">小炒肉</td>
<td width="40%" height="30px">28元</td>
</tr>
<tr>
<td width="20%" height="30px">2</td>
<td width="40%" height="30px">毛家红烧肉</td>
<td width="40%" height="30px">48元</td>
</tr>
<tr>
<td width="20%" height="30px">3</td>
<td width="40%" height="30px">腊味合蒸</td>
<td width="40%" height="30px">38元</td>
</tr>
</table>
</div>
<div id="div2" style="display:none">
<table align="center" width="500px" border="1">
<tr>
<td width="20%" height="30px">序号</td>
<td width="40%" height="30px">菜名</td>
<td width="40%" height="30px">价格</td>
</tr>
<tr>
<td width="20%" height="30px">1</td>
<td width="40%" height="30px">麻婆豆腐</td>
<td width="40%" height="30px">18元</td>
</tr>
<tr>
<td width="20%" height="30px">2</td>
<td width="40%" height="30px">水煮肉片</td>
<td width="40%" height="30px">38元</td>
</tr>
<tr>
<td width="20%" height="30px">3</td>
<td width="40%" height="30px">宫保鸡丁</td>
<td width="40%" height="30px">28元</td>
</tr>
</table>
</div>
<div id="div3" style="display:none"></div>
<div id="div4" style="display:none"></div>