日期:2014-05-17  浏览次数:20806 次

select onchange事件的问题
大家好,有谁能帮我一下,挺急的。
就是有一个下拉框,我想用这个下拉框的onchange   事件来显示一个表格,隐藏一个表格。


------解决方案--------------------
<HTML>
<script>
function change()
{
if (document.getElementById( "s1 ").value == "show ")
{
document.getElementById( "tb ").style.display = "block ";
}
else
{
document.getElementById( "tb ").style.display = "none ";
}
}
</script>
<BODY>
<select id= "s1 " onchange= "change() ">
<option value= "show "> 显示 </option>
<option value= "hidden "> 隐藏 </option>
</select>
<TABLE id= "tb " BORDER= "2 ">
<COLGROUP SPAN= "3 " STYLE= "color:gren;background:black ">
<!-- 样式仅应用于前两列,而不是所有的三列,而且字
体是红色而不是绿色。这是 COL 元素的标签属性导致的。 -->
<COL STYLE= "color:red ">
</COLGROUP>
<TR>
<TD> 此列位于第一组。 </TD>
<TD> 此列位于第一组。 </TD>
<TD> 此列位于第二组。 </TD>
</TR>
<TR>
<TD> 此列位于第一组。 </TD>
<TD> 此列位于第一组。 </TD>
<TD> 此列位于第二组。 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
------解决方案--------------------
try
-----------------------
<select onchange= "show(); " id= "s1 " SelectedTable= "0 ">
<option value= "1 "> 1 </option>
<option value= "2 "> 2 </option>
<option value= "3 "> 3 </option>

<table id= "table0 ">
<tr>
<td> table1 </td>
</tr>
</table>

<table id= "table1 " style= "display:none ">
<tr>
<td> table2 </td>
</tr>
</table>

<table id= "table2 " style= "display:none ">
<tr>
<td> table3 </td>
</tr>
</table>
</select>

<script language= "javascript ">
function show(){
document.getElementById( "table " + s1.SelectedTable).style.display= "none ";
document.getElementById( "table " + s1.selectedIndex).style.display= " ";
s1.SelectedTable = s1.selectedIndex;
}

</script>