根据下拉框让不同table显示

1、把id为Tab8的table里面的display:none去掉
2、初始化js设置选中的table去掉display

解决方案 »

  1.   

    方法1<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head>
    <body>
    <script language="javascript">
    function Show(id)
    {
     for(var i=5;i<9;i++)
     {
      document.getElementById("Tab"+i).style.display="none";
     }
     if(id!="" && !isNaN(id)){
     document.getElementById("Tab"+id).style.display="";
     }
    }
    </script><select id="SEL" onchange="Show(this.value)">
    <option value="8">选择</option>
    <option value="5">0</option>
    <option value="6">1</option>
    <option value="7">2</option>
    </select><table name="Tabs" id="" style="display:none"><tr><td>第5个</td></tr></table>
    <table name="Tabs" id="Tab5" style="display:none"><tr><td>第一个</td></tr></table>
    <table name="Tabs" id="Tab6" style="display:none"><tr><td>第二个</td></tr></table>
    <table name="Tabs" id="Tab7" style="display:none"><tr><td>第三个</td></tr></table>
    <table name="Tabs" id="Tab8"><tr><td>第四个</td></tr></table>
    </body>
    </html>方法2<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页1</title>
    </head>
    <body>
    <script language="javascript">
    window.onload = function(){
    var sel = document.getElementById("SEL");
     document.getElementById("Tab"+sel.value).style.display="";
    }function Show(id)
    {
     for(var i=5;i<9;i++)
     {
      document.getElementById("Tab"+i).style.display="none";
     }
     if(id!="" && !isNaN(id)){
     document.getElementById("Tab"+id).style.display="";
     }
    }
    </script><select id="SEL" onchange="Show(this.value)">
    <option value="8">选择</option>
    <option value="5">0</option>
    <option value="6">1</option>
    <option value="7">2</option>
    </select><table name="Tabs" id="" style="display:none"><tr><td>第5个</td></tr></table>
    <table name="Tabs" id="Tab5" style="display:none"><tr><td>第一个</td></tr></table>
    <table name="Tabs" id="Tab6" style="display:none"><tr><td>第二个</td></tr></table>
    <table name="Tabs" id="Tab7" style="display:none"><tr><td>第三个</td></tr></table>
    <table name="Tabs" id="Tab8" style="display:none"><tr><td>第四个</td></tr></table></body>
    </html>