层的显示与隐藏不成功

为什么下面的这个实现层的显示和隐藏就不能在IE上运行不起来，再FIREFOX是OK的呀？郁闷<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link  rel="stylesheet" href="style/main.css"  type="text/css"> 
<title>查询页面</title>
<script language="javascript">
  function id1show()
        {
            document.getElementById("ID1").style.display = "block";
            document.getElementById("ID2").style.display = "none";
            document.getElementById("ID3").style.display = "none";        }
 function id2show()
        {
            document.getElementById("ID1").style.display = "none";
            document.getElementById("ID2").style.display = "block";
            document.getElementById("ID3").style.display = "none";        }

 function id3show()
        {
            document.getElementById("ID1").style.display = "none";
            document.getElementById("ID2").style.display = "none";
            document.getElementById("ID3").style.display = "block";        }
</script>
<script src="lib/WebCalendar.js" type="text/javascript"></script>
<style type="text/css">
#ID1{
position:absolute;
left:51px;
top:32px;
width:331px;
height:83px;
z-index:1;
}
#ID2{
position:absolute;
left:572px;
top:27px;
width:496px;
height:35px;
z-index:2;
}#ID3{
position:absolute;
left:310px;
top:29px;
width:318px;
height:48px;
z-index:3;
}</style>
</head><body background="image/bg.png">
<form name="form1" method="post" action="query.php?s=ok">
  <div id="ID1">ECN NO: 
    <input name="ECN_NO" type="text" id="ECN_NO">
    <input type="submit" name="Submit" value="查询">
  </div>
  <div id="ID2"> 
    <p>开始日期： 
      <input name="S_D" type="text" id="S_D" style="cursor:pointer" onclick="SelectDate(this,'yyyy-MM-dd')" readonly="true">
      ~ 结束日期： 
      <input name="E_D" type="text" id="E_D" style="cursor:pointer" onclick="SelectDate(this,'yyyy-MM-dd')" readonly="true">
      <input type="submit" name="Submit2" value="查询">
    </p>
    <p>&nbsp; </p>
  </div>
  <div id="ID3"> 
    <p>变更内容: 
      <input name="EC_C" type="text" id="EC_C">
      <input type="submit" name="Submit3" value="查询">
    </p>
  </div>
  查询条件： 
  <select name="select">
    <option value="ECN_NO" onClick="id1show();">ECN NO</option>
    <option value="DATE_RANGE" onClick="id2show();">日期</option>
    <option value="CHANGE_CONTENT" onClick="id3show();">变更内容</option>
  </select>
</form>
</body>
</html>

解决方案 »

  1.   

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link rel="stylesheet" href="style/main.css" type="text/css"> <title>查询页面</title> <script language="javascript">  function id1show() { document.getElementById("ID1").style.display = "block"; document.getElementById("ID2").style.display = "none"; document.getElementById("ID3").style.display = "none"; } function id2show() { document.getElementById("ID1").style.display = "none"; document.getElementById("ID2").style.display = "block"; document.getElementById("ID3").style.display = "none"; } function id3show() { document.getElementById("ID1").style.display = "none"; document.getElementById("ID2").style.display = "none"; document.getElementById("ID3").style.display = "block"; } </script> <script src="lib/WebCalendar.js" type="text/javascript"></script> <style type="text/css"> #ID1{  position:absolute;  left:51px;  top:32px;  width:331px;  height:83px;  z-index:1; } #ID2{  position:absolute;  left:572px;  top:27px;  width:496px;  height:35px;  z-index:2; } #ID3{  position:absolute;  left:310px;  top:29px;  width:318px;  height:48px;  z-index:3; } </style> </head> <body background="image/bg.png"> <form name="form1" method="post" action="query.php?s=ok">  <div id="ID1">ECN NO: <input name="ECN_NO" type="text" id="ECN_NO">  <input type="submit" name="Submit" value="查询">  </div>  <div id="ID2"> <p>开始日期： <input name="S_D" type="text" id="S_D" style="cursor:pointer" onclick="SelectDate(this,'yyyy-MM-dd')" readonly="true">  ~ 结束日期： <input name="E_D" type="text" id="E_D" style="cursor:pointer" onclick="SelectDate(this,'yyyy-MM-dd')" readonly="true">  <input type="submit" name="Submit2" value="查询">  </p>  <p>&nbsp; </p>  </div>  <div id="ID3"> <p>变更内容: <input name="EC_C" type="text" id="EC_C">  <input type="submit" name="Submit3" value="查询">  </p>  </div>  查询条件： <select name="select" onchange="eval('id'+(this.selectedIndex+1)+'show()');">  <option value="ECN_NO">ECN NO</option>  <option value="DATE_RANGE"">日期</option>  <option value="CHANGE_CONTENT">变更内容</option>  </select> </form> </body> </html>
      

  2.   

    option里面应该改成onchange事件吧
      

  3.   


    <select name="select" onchange="eval('id'+(this.selectedIndex+1)+'show()');">    
      <option value="ECN_NO">ECN NO</option>    
      <option value="DATE_RANGE">日期</option>    
      <option value="CHANGE_CONTENT">变更内容</option>  
    </select>
      

  4.   

    <select   name= "select "   onchange= "eval( 'id '+(this.selectedIndex+1)+ 'show() '); ">         
        <option   value= "ECN_NO "> ECN   NO </option>         
        <option   value= "DATE_RANGE "> 日期 </option>         
        <option   value= "CHANGE_CONTENT "> 变更内容 </option>     
    </select>
      

  5.   

    改为onmouseover()和onmouseout()时间
    鼠标移进移出。。
      

  6.   

    <select name="select">
        <option value="ECN_NO" onClick="id1show();">ECN NO</option>
        <option value="DATE_RANGE" onClick="id2show();">日期</option>
        <option value="CHANGE_CONTENT" onClick="id3show();">变更内容</option>
      </select>
    这里有问题啊 <select name="select"> 这里面去加事件啊 可根据不同的值调用不同的方法
      

  7.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <link  rel="stylesheet" href="style/main.css"  type="text/css"> 
    <title>查询页面</title>
    <script language="javascript">
      function id1show()
            {
                document.getElementById("ID1").style.display = "block";
                document.getElementById("ID2").style.display = "none";
                document.getElementById("ID3").style.display = "none";        }
     function id2show()
            {
                document.getElementById("ID1").style.display = "none";
                document.getElementById("ID2").style.display = "block";
                document.getElementById("ID3").style.display = "none";        }
            
     function id3show()
            {
                document.getElementById("ID1").style.display = "none";
                document.getElementById("ID2").style.display = "none";
                document.getElementById("ID3").style.display = "block";        }
    </script>
    <script src="lib/WebCalendar.js" type="text/javascript"></script>
    <style type="text/css">
    #ID1{
        position:absolute;
        left:51px;
        top:32px;
        width:331px;
        height:83px;
        z-index:1;
    }
    #ID2{
        position:absolute;
        left:572px;
        top:27px;
        width:496px;
        height:35px;
        z-index:2;
    }#ID3{
        position:absolute;
        left:310px;
        top:29px;
        width:318px;
        height:48px;
        z-index:3;
    }</style>
    </head><body background="image/bg.png">
    <form name="form1" method="post" action="query.php?s=ok">
      <div id="ID1">ECN NO: 
        <input name="ECN_NO" type="text" id="ECN_NO">
        <input type="submit" name="Submit" value="查询">
      </div>
      <div id="ID2"> 
        <p>开始日期： 
          <input name="S_D" type="text" id="S_D" style="cursor:pointer" onclick="SelectDate(this,'yyyy-MM-dd')" readonly="true">
          ~ 结束日期： 
          <input name="E_D" type="text" id="E_D" style="cursor:pointer" onclick="SelectDate(this,'yyyy-MM-dd')" readonly="true">
          <input type="submit" name="Submit2" value="查询">
        </p>
        <p>&nbsp; </p>
      </div>
      <div id="ID3"> 
        <p>变更内容: 
          <input name="EC_C" type="text" id="EC_C">
          <input type="submit" name="Submit3" value="查询">
        </p>
      </div>
      查询条件：
       <select name="select" onchange="eval('id'+(this.selectedIndex+1)+ 'show();');">  
        <option value="ECN_NO">ECN NO</option>
        <option value="DATE_RANGE">日期</option>
        <option value="CHANGE_CONTENT">变更内容</option>
      </select>
    </form>
    </body>
    </html>