用下拉框（select）控制表格显示隐藏

最新推荐文章于 2021-12-15 11:23:37 发布

最新推荐文章于 2021-12-15 11:23:37 发布 · 240 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的不同表格显示切换的方法。通过下拉菜单选择不同的选项，可以动态显示对应的表格内容，未选中的表格则被隐藏。这种方式适用于需要根据不同条件展示不同数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

net_lover（【孟子E章】）

------------------------------------------------------------------------------------
<script language="JavaScript">

</script>

<select size="1" name=cpspCode onChange="goURL(this)">
<option selected>选择方式</option>
<option value="1">方式1</option>
<option value="2">方式2</option>
</select>
---------------------------------------------------------------------------------
<script>
function setChange(num)
{
eval("tb"+num+".style.display=''");
alltab=document.all.tags("TABLE");
for (i=0;i<alltab.length;i++){
id=alltab[i].id;
if ( (id!="tb"+num) && (id.substr(0,2)=="tb")) eval(id+".style.display='none'");
}
}

</script>
<table>
<select name="selfs" size="1" onchange="setChange(this.value)">
<option selected>选择方式</option>
<option value="1">方式1</option>
<option value="2">方式2</option>
</select>
</table>
<table id='tb1' style='DISPLAY:none'>
方式1 方式1 方式1
</table>

<table id='tb2' style='DISPLAY:none'>
方式2 方式2 方式2
</table>
------------------------------------------------------------------------
<script language="javascript">
function setChange()
{
if (window.selfs.value == "1")
{
tb1.style.display = "block";
}
else
{
tb1.style.display = "none";
}
if (window.selfs.value == "2")
{
tb2.style.display = "block";
}
else
{
tb2.style.display = "none";
}
}
</script>

<table>
<select name="selfs" size="1" onchange="setChange()">
<option selected>选择方式</option>
<option value="1">方式1</option>
<option value="2">方式2</option>
</select>
</table>

<table id='tb1' style='DISPLAY:none'>
方式1 方式1 方式1
</table>

<table id='tb2' style='DISPLAY:none'>
方式2 方式2 方式2
</table>
--------------------------------------------------------------
<script>
function setChange()
{
tb1.style.display=(document.f.selfs.value=="1")?"block":"none";
tb2.style.display=(document.f.selfs.value=="1")?"none":"block";
}
</script>
<form name=f>

<select name="selfs" size="1" onchange="setChange()">
<option selected>选择方式</option>
<option value="1">方式1</option>
<option value="2">方式2</option>
</select>

<table id='tb1' style='DISPLAY:none'>
方式1 方式1 方式1
</table>

<table id='tb2' style='DISPLAY:none'>
方式2 方式2 方式2
</table>
</form>
-------------------------------------------------------------------------
<SCRIPT LANGUAGE=javascript>

</SCRIPT>

<table>
<select name="selfs" onchange="setChange()">
<option selected>选择方式</option>
<option value="1">方式1</option>
<option value="2">方式2</option>
</select>
</table>

<table id='tb1' style='DISPLAY:none'>
方式1 方式1 方式1
</table>

<table id='tb2' style='DISPLAY:none'>
方式2 方式2 方式2
</table>
--------------------------------------------------------------------
<script language=javascript>
function setChange()
{
if (document.all("selfs").value=="1")
{
document.all("tb1").style.display="";
}
else
{
document.all("tb1").style.display="none";
}
if (document.all("selfs").value=="2")
{
document.all("tb2").style.display="";
}
else
{
document.all("tb2").style.display="none";
}
}
function vload()
{
document.all("tb1").style.display = "none";
document.all("tb2").style.display = "none";
}
</script>
<body onload="vload();">
<select name="selfs" size="1 onchange="setChange();">
<option>选择方式</option>
<option value="1">方式1</option>
<option value="2">方式2</option>
</select>
<table>
<tr>
<td id="tb1">方式1 方式1 方式1</td>
</tr>
<tr>
<td id="tb2">方式2 方式2 方式2</td>
</tr>
</table>
--------------------------------------------------------------