Dynamical options adding to select element not rendering correctly

Question

I have read all the similar questions provided by SO, but no one is solving my issue.

I have the following html:

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">



<form action="" id="myForm">
   <div class="input-field col s12 l6">
       <select id="myselectid" name="myselectname">
       </select>
   </div>
   <div class="col s12 l6">
     <button id="" class="btn blue" type="submit"> submit</button>
   </div>
</form>

I'd need to populate the select element with values of the key "name" of a JSON file.

myJSON

"resources": [
    {
      "name": "test.txt",
      "format": "txt",
      "size": 92502
    },
    {
      "name": "mini-test.txt",
      "format": "txt",
      "size": 64855
   }
]

myJS

<script>
 document.addEventListener('DOMContentLoaded', function() {
   $.getJSON(myJSON, function(data){
      var select = document.getElementById("myselectid");
      $.each(data.resources, function(i, field){
        select.add(new Option(field.name, field.name));
      });
    });
  });
  $(document).ready(function(){
     $('.sidenav').sidenav();
     $('select').formSelect();
  });
 </script>

I get a drop down menu with empty default value. By clicking the arrow to expand the menu I get only the option "test.txt".

The odd thing is that the Firefox inspector shows the expected html in grey color

<select id="myselectid" name="myselectname" tabindex=-1>
  <option value="test.txt">test.txt</option>
  <option value="mini-test.txt">mini-test.txt</option>
</select>

What is going on?

Any help is really welcome..

Thank you in advance

EDIT: The issue is caused by the materialize framework. I was initialising the select element BEFORE adding options to it. Check my answer for details.

Answer 1

The issue has been solved thanks to Sean Doherty at the Materialize Gitter channel.

The problem occurred because I was initialising the M select element BEFORE the dynamic population.

Here follows the correct

myJS

<script>
 document.addEventListener('DOMContentLoaded', function() {
   $.getJSON(myJSON, function(data){
      var select = document.getElementById("myselectid");
      $.each(data.resources, function(i, field){
        select.add(new Option(field.name, field.name));
      });
      // init select element after collecting the option values
      M.FormSelect.init(document.querySelectorAll('select'));
    });
  });
  $(document).ready(function(){
     $('.sidenav').sidenav();
     // do not init select here because the dyn population is not done yet
     //$('select').formSelect();
  });
 </script>