提问者:小点点

按下“后退”按钮时,在HTML中再次显示隐藏元素


我有这个简单的HTML代码,它显示隐藏的元素在情况下,用户选择‘是’。 我在这段代码中遇到的问题是:在用户提交并按下浏览器上的back按钮之后,它仍然显示“Yes”,但没有显示隐藏的元素。 用户必须单击“否”,然后重新选择“是”,以便再次显示数据。 对此如何解决? 我加了这张照片供你参考

<!DOCTYPE html>
<html>
   <head>
      <title>Some Title</title>
      <script type='text/javascript'>
         function onload() {
            document.getElementById('YesOrNo').onchange = function (e) {
            if (this.value == 'Yes') {
              document.getElementById('Details').style.display='';
            } else {
              document.getElementById('Details').style.display='none';
           }
          };
         }
      </script>
   </head>
   <body onload='onload()'>
      <h2 >Welcome to ABC</h2>
      <form action=. method='POST' enctype='multipart/form-data'>
               YesOrNo?
               <select id='YesOrNo' name = 'Insert' style='width: 80px;height: 25px' required>
                  <option value='No'>No</option>
                  <option value='Yes'>Yes</option>
               </select>
         <div id='Details' style='display:none;'>
             <br><b>Some Hidden Data</b><br>
         </div>
        <br><br><input type='submit' name='my-form' value='Submit' style='width: 100px;height: 40px;font-weight: 700'><br>
      </form>
      <hr>
      See you soon
   </body>
</html>

共1个答案

匿名用户

我看了一下你的代码,但我觉得有问题。 您已经创建了一个基于onchange事件的函数,这非常好。 但是如果页面返回,则不会调用该事件,这意味着不会调用该函数。 因此,未设置display属性,这意味着内容保持隐藏。