動的に作成されたオプション要素を表示または選択できません

Question

AJAX呼び出しを実行してデータを取得し、ユーザーの選択に基づいてドロップダウンメニューを作成します。私はデータをうまく取得しますが、コンソールに表示されていても、新しい追加/追加オプションを選択することはできません。私はAJAXの成功パラメータ内でこれをやっている - 代わりに「のappendChild」の

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

. 
. 
.}); 

、私はまた、「追加」「追加」だけでなく、文字列を構築し、それを追加しようとしています。

しかし、ハードコードされた値に無効オプション外のオプションが表示されていないように私は、私のドロップダウンを開くことができません：私はクロームデバッガを開き、要素を検査する際のオプションがあります

は、

Answer 1

、問題がマテリアライズCSSのライブラリとありました。

How to dynamically modify <select> in materialize css framework

Answer 2

あなたのコードは動作しますが、ajaxの部分はOKであり、devtoolsではその要素が表示されているとします。私はここでアヤックスの部分を取り出した。おそらくあなたのページの何かが問題を引き起こしています。言及した他のコメンターとして

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>