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
仅在准备选项的完整列表之后，才应添加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 2

似乎您的代码唯一的问题是您忘记定义变量“ 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 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>

通过Java脚本添加到数据列表

3 个答案:

解决方案