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

sorry forgot about that, i need select option data is my array it call "provinsi" — Shaugi
– Shaugi, Commented Jul 24, 2018 at 16:07
jsfiddle.net/w83b7j6x/1 - seems to work for me. Where are you defining provinsi? — Kingsley
– Kingsley, Commented Jul 24, 2018 at 16:08
i use on blade.php laravel , i defining from leaflet, and i use the code to bind data to option in blade inside tag <script> — Shaugi
– Shaugi, Commented Jul 24, 2018 at 16:10
The code by itself is working fine. Can you show how you are populating the variable provinsi — karthick
– karthick, Commented Jul 24, 2018 at 16:10

yotke · Accepted Answer · 2018-07-24 16:22:03Z

2

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.

edited Jul 24, 2018 at 16:22

answered Jul 24, 2018 at 16:13

yotke

1,2082 gold badges13 silver badges26 bronze badges

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

2 Comments

karthick Over a year ago

you need to use DOMContentLoaded to tell dom is ready not iife

yotke Over a year ago

@karthick I don't must anything. you can do that in iife as long as the script is loaded at the end of the body tag. Edit: Actually, This is faster to execute than an onload handler because this waits only for the DOM to be ready, not for all images to load. And, this works in every browser.

Beginner · Accepted Answer · 2018-07-24 16:36:21Z

1

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>

answered Jul 24, 2018 at 16:36

Beginner

9,20011 gold badges50 silver badges94 bronze badges

Comments

Unmitigated · Accepted Answer · 2018-07-24 16:44:16Z

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>

Khabir · Accepted Answer · 2022-01-07 11:03:33Z

0

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>

answered Jan 7, 2022 at 11:03

Khabir

5,8781 gold badge26 silver badges38 bronze badges

Collectives™ on Stack Overflow

how to bind array data to select option

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related