添加到选择元素的动态选项无法正确呈现答案

【问题标题】：Dynamical options adding to select element not rendering correctly添加到选择元素的动态选项无法正确呈现
【发布时间】：2020-11-26 12:04:53
【问题描述】：

我已阅读 SO 提供的所有类似问题，但没有人解决我的问题。

我有以下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>

我需要使用 JSON 文件的键“名称”的值填充选择元素。

我的JSON

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

我的JS

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

我得到一个默认值为空的下拉菜单。通过单击箭头展开菜单，我只看到选项"test.txt"。

奇怪的是，Firefox 检查器以灰色显示预期的 html

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

发生了什么事？

非常欢迎任何帮助..

提前谢谢你

编辑：该问题是由物化框架引起的。在向它添加选项之前，我正在初始化选择元素。详情请查看我的回答。

【问题讨论】：

当我重新创建您的代码时，它对我来说运行良好。唯一的区别是我实际上并没有在外部加载资源，只是在代码中定义了 JSON——但我看不出如果它以你所说的格式到达 HTML 会如何影响它。选项都显示正常。因此，从逻辑上讲，问题似乎出在其他地方。这真的是您拥有的唯一代码吗？你有任何控制台错误吗？也许值得展示你的完整代码。
@Toby：谢谢你的评论。显示整个代码没问题，但我刚刚验证问题是由物化框架引起的。如果我将其注释掉，我会得到一个糟糕的下拉菜单，它实际上显示了所有选项。关于如何解决这个问题的任何想法
那么具体化的东西会破坏你的代码吗？这是一个相当广泛的问题。我的猜测是您在加载 json 之前应用了物化库的选择装饰，并且它没有选择您添加的选项。但是如果没有看到你的实际代码，除了猜测之外几乎不可能做任何事情。
@Toby 你是对的。在 M Gitter 频道解决了 OP 的问题。 M Select 需要在动态填充之后初始化。希望她能发布解决方案:)
@SeanDoherty 感谢您的确认。这是使用在 DOM 上运行的框架的常见问题。听起来您提供了出色的支持！

标签： javascript jquery json materialize

【解决方案1】：

感谢 Materialize Gitter 频道的 Sean Doherty 解决了这个问题。

出现问题是因为我在动态填充之前初始化了 M 选择元素。

下面是正确的

我的JS

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

【讨论】：