Appending to Datalist Via Javascript

Question

I am attempting to populate a datalist via javascript, but failing miserably. The code below looks ok (to me) - but obviously is not.

I need the datalist to be populated off an array and eventually embeded within 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>

Charlie · Accepted Answer · 2019-08-17 15:00:27Z

1

Only few places to be changed to make your code run.

You need to define options before the loop
You should add the innerHTML only after you prepare the full list of options

Also few other places in your code are optimized.

<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>

answered Aug 17, 2019 at 15:00

Charlie

24k12 gold badges65 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JSONaLeo · Accepted Answer · 2019-08-17 14:59:21Z

It seems like the only problem with your code is that you forgot to define the variable "options". I got this from the error returned when running your code as is:

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

by including var options = ''; in your variable declarations, it looks like it does what you want. I also removed the forward slash from the line options +='<option value='+cars[counter]+'/>'; as it was appending that to the end of each option in the select.

There are certainly other ways to achieve the same results, but this proves that the approach you were taking works with just one additional line of code.

<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>

Best of luck! Hopefully this helps you out.

mrityunjoynath · Accepted Answer · 2019-08-17 15:30:19Z

Solution

You had missed it in quite of the places. Common mistakes.

Like you were declaring new option variable with each iterator. You have to declare it outside loop. Study the code to know your mistakes.

Best of luck!

<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>

Collectives™ on Stack Overflow

Appending to Datalist Via Javascript

3 Answers 3

Comments

Comments

Solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related