看不到或選擇動態創建的選項元素

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) 

. 
. 
.}); 

相反「的appendChild」，我也嘗試過「添加」，「追加」，以及建立一個字符串，該追加的。該選項那裏，當我打開Chrome調試和檢查元素：

但我無法打開我的下拉列表中，因爲有硬編碼值禁用選項之外的任何選項：

Answer 1

如前所述另一個評論，這個問題是與Materialise的CSS庫。我只是需要將其添加到AJAX代碼的底部：

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

欲瞭解更多信息，請參見該問題：

How to dynamically modify <select> in materialize css framework

Answer 2

你的代碼工作，假設ajax部分是好的，你提到在devtools中你看到了這個元素。我在這裏拿出了ajax部分。也許你網頁上的其他內容導致了這個問題。

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

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