无法查看或选择动态创建的选项元素

Question

我执行AJAX调用以检索一些数据，以根据用户选择填充下拉菜单。我得到的数据很好，但是无法选择新添加/追加的选项，即使它们出现在控制台中。我在AJAX成功参数 -

中进行此操作

<div class="row">
<div class="select-field col s12 required">
  <label>Manufacturer</label>
  <select id="Manufacturer_options" name="Manufacturer_options">
           <option value = "" disabled selected> Select Manufacturer</option>


  </select>
</div>
</div>




$.ajax({
url: .....
data: ......
dataType: 'json',

success: function(data) {    

  select = document.getElementById('Manufacturer_options')
  var opt = document.createElement('option');
      opt.innerHTML = 'test'
      select.appendChild(opt)

.
.
.});

而不是＆＃34; appendChild＆＃34;，我还试过＆＃34;添加＆＃34;，＆＃34;追加＆＃34;，以及构建一个字符串并追加它。当我打开Chrome调试器并检查元素时，该选项就在那里：

但是我无法打开我的下拉菜单，因为禁用硬编码值选项之外没有选项：

Answer 1

你的代码是有效的，假设ajax部分没问题，你提到在devtools中你看到了元素。我在这里取出了ajax部分。也许页面上的其他内容会导致问题。

＆＃13;

＆＃13;

  select = document.getElementById('Manufacturer_options');
  var opt = document.createElement('option');
  opt.innerHTML = 'test';
  select.appendChild(opt);

＆＃13;

<div class="row">
<div class="select-field col s12 required">
  <label>Manufacturer</label>
  <select id="Manufacturer_options" name="Manufacturer_options">
           <option value = "" disabled selected> Select Manufacturer</option>
  </select>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如另一位评论者提到的，问题在于物化css库。我只需要将它添加到AJAX代码的底部：

$('#Manufacturer_options').material_select();

有关详细信息，请参阅此问题：

How to dynamically modify <select> in materialize css framework