how to bind array data to select option

Question

i have array data it call "provinsi" i got array on console like normal array

here's my code

 <select id="select">
      <option value="default">default</option>
 </select>
 <script>
        console.log(provinsi)
        var select = document.getElementById("select");

        for(var i = 0; i < provinsi.length; i++)
        {
            var option = document.createElement("option"),
                txt = document.createTextNode(provinsi[i]);
            option.appendChild(txt);
            option.setAttribute("value",provinsi[i]);
            select.insertBefore(option,select.lastChild);
        }
    </script>

but i got result like this

here's my console "provinsi" any suggest ? thanks before

Answer 1

I believe the DOM is not ready yet.

Try putting your code inside IIFE.

(function() {
    // the DOM will be available here

    console.log(provinsi)
    var select = document.getElementById("select");

    for(var i = 0; i < provinsi.length; i++)
    {
        var option = document.createElement("option"),
            txt = document.createTextNode(provinsi[i]);
        option.appendChild(txt);
        option.setAttribute("value",provinsi[i]);
        select.insertBefore(option,select.lastChild);
    }

})();

** Just to clarify as @karthick mentioned, make sure the script is loaded at the end of the body tag.

Answer 2

I hope this will work happy coding :) Note: change your provinces array with orginal values

 $(document).ready(()=> { let provinces = ["test1", "test2", "test3", "test4" ] $.each(provinces, function(key,item) { $("#select").append(new Option(item, key)); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="select"> <option value="default">default</option> </select> 

Answer 3

The DOM may not have finished loading when your script is run. You should run your function on DOMContentLoaded .

 <select id="select"> <option value="default">default</option> </select> <script> var provinsi = ["test1", "test2"]; document.addEventListener("DOMContentLoaded", function(event) { //DOM fully loaded and parsed var select = document.getElementById("select"); for(var i = 0; i < provinsi.length; i++) { var option = document.createElement("option"), txt = document.createTextNode(provinsi[i]); option.appendChild(txt); option.setAttribute("value",provinsi[i]); select.insertBefore(option,select.lastChild); } }); </script> <script> </script> 

Answer 4

You can use jquery each function for looping

Javascript Code:

var makers = [
  {id: 1, name: 'Toyota'}, 
  {id: 2, name: 'Nissan'}, 
  {id: 3, name: 'Honda'}
]
    
$.each(makers, function (index, item) {
   $('#makers-listing').append(`<option value="${item.id}">${item.name}</option>`);
});

Html Code:

<select id="makers-listing">
    <option>Select Maker</option> <!-- This is default value -->
</select>