Question

我已经填充了输入列表的列表，如下面的代码。然后，当我尝试单击输入字段并使用列表打开下拉列表时，列表将在一秒钟之内打开和关闭。我不确定这是CSS还是Javascript问题。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function getES(){
         var a = new Array(15).fill("0");
             var options;
             for(var i = 0; i < a.length; i++)
         options += '<option value="'+a[i]+'" />';
         document.getElementById('ESList').innerHTML = options;
         }
      </script>
   </head>
   <body>
      <form action="/action_page.php" method="get" onclick="getES()">
         <input list="ESList" name="browser">
         <datalist id="ESList">                      
         </datalist>
         <input type="submit">
      </form>
   </body>
</html>

Answer 1

每次有人在表单中单击时，您都在运行该函数：

onclick="getES()"

尝试将JS移至底部并在负载下运行：

<html>
   <head>

   </head>
   <body>
      <form action="/action_page.php" method="get">
         <input list="ESList" name="browser">
         <datalist id="ESList">                      
         </datalist>
         <input type="submit">
      </form>
        <script>
         var a = new Array(15).fill("0");
             var options;
             for(var i = 0; i < a.length; i++)
         options += '<option value="'+a[i]+'" />';
         document.getElementById('ESList').innerHTML = options;

      </script>
   </body>

</html>

HTML输入列表由javascript填充时消失

1 个答案: