通过 Javascript 附加到数据列表

Question

我试图通过 javascript 填充数据列表，但失败得很惨。下面的代码看起来不错（对我来说）——但显然不是。

我需要从数组中填充数据列表并最终嵌入 PHP echo

<html>
<head>

<script type="text/javascript">

function populate()
{
 var cars = ["Saab", "Volvo", "BMW"];   
 var counter=0; 

 for (counter=0; counter<cars.length; counter++)
 {   
  options +='<option value='+cars[counter]+'/>';     
  document.getElementById('mylist').innerHTML = options;
 }
}

</script>


</head>
<body>



<input list="mylist" />

<datalist id="mylist">
<option value="address1">
<option value="address2">
</datalist>


 <input type="button" onclick="populate();" >

</body>
</html>

Answer 1

您的代码似乎唯一的问题是您忘记定义变量 "options"。我从运行你的代码按原样返回的错误中得到这个：

"message": "Uncaught ReferenceError: options is not defined"

通过在您的变量声明中包含 var options = '';，它看起来就像您想要的那样。我还删除了行 options +='<option value='+cars[counter]+'/>'; 中的正斜杠，因为它将它附加到 select 中每个选项的末尾。

当然还有其他方法可以达到相同的结果，但这证明您所采用的方法只需要增加一行代码就可以工作。

<html>
<head>

<script type="text/javascript">

function populate()
{
 var cars = ["Saab", "Volvo", "BMW"];   
 var counter=0; 
 var options = '';

 for (counter=0; counter<cars.length; counter++)
 {   
  options +='<option value='+cars[counter]+'>';     
  document.getElementById('mylist').innerHTML = options;
 }
}

</script>


</head>
<body>



<input list="mylist" />

<datalist id="mylist">
<option value="address1">
<option value="address2">
</datalist>


 <input type="button" onclick="populate();" >

</body>
</html>

祝你好运！希望这对你有所帮助。

Answer 2

只需更改几个地方即可使您的代码运行。

循环前需要定义options
只有在准备好完整的选项列表后才应添加 innerHTML

您代码中的其他几个地方也进行了优化。

<html>
 <head>

  <script type="text/javascript">

   function populate()
   {
     var cars = ["Saab", "Volvo", "BMW"]; 
     var options = "";
     
     for (var counter=0; counter<cars.length; counter++) {   
        options +='<option value=" ' +cars[counter] + '">';  
     }
  
    
 
     document.getElementById('mylist').innerHTML = options; 
   }

</script>


</head>
<body>



<input list="mylist" />

<datalist id="mylist">
  <option value="address1">
  <option value="address2">
</datalist>


 <input type="button" onclick="populate();" value="populate" >

</body>
</html>

Answer 3

解决方案

你错过了很多地方。常见错误。

就像您为每个迭代器声明新的选项变量一样。你必须在循环外声明它。研究代码以了解您的错误。

祝你好运！

<html>
    <head>

    <script type="text/javascript">

    function populate()
    {
        var cars = ["Saab", "Volvo", "BMW"];   
        var counter=0; 
        var options = document.getElementById('mylist').innerHTML;
        for (counter=0; counter<cars.length; counter++)
        {   
            options +='<option value='+cars[counter]+'>';     
        }
        document.getElementById('mylist').innerHTML=options;
    }

    </script>


    </head>
    <body>



    <input list="mylist" />

    <datalist id="mylist">
    <option value="address1">
    <option value="address2">
    </datalist>

    <input type="button" onclick=populate() value="POPULATE">

    </body>
    </html>

通过 Javascript 附加到数据列表

Appending to Datalist Via Javascript

html

javascript

html-datalist

解决方案