jquery-ui selectmenu - ドロップダウンオプションを動的にロードしているときに、「メニューウィジェットインスタンスのそのようなメソッド 'インスタンス'が見つかりません」

Question

ID TestListのドロップダウンリスト（選択リスト）があります。

jQuery UIのselectmenuとして使用します。このドロップダウンには動的に入力が行われるため、最初はこの選択リストにはオプションがありません。スクリプトセクションで は、私が最初のように選択メニューで選択リストを初期化しています：

$("#TestList").selectmenu(); 

次に、私は動的にデータを移入したいので、私は、このやっている：

for (var i = 0; i < data.length; i++) {   
    $('#TestList').val(data[i]); 
    $("#TestList").selectmenu("refresh"); 
} 

をしかし、問題は、それはスローされますキャッチエラー：メニューウィジェットインスタンスのためのそのようなメソッド 'インスタンス'はありません。

私はHow to select an option in a jQuery ui selectmenu dynamically?に続きますが、それでも問題は解決しません。私はDEMOを作成している

Answer 1

： 私は.. は私がこの問題を解決してください 一覧を最新のjQuery UIパッケージ（jqueryの-UI-1.12.1.custom）とjQuery 1.9を使用しています。

このDEMO：

1. Dynamically initializes the selectmenu widget on the HTML dropdown
2. Dynamically create/load options
3. Dynamically select a specific option in the dropdown

私はそれはあなたに大きな助けをすると思います！ここで

DEMOから完全なコードです：

<script> 
    $(function() { 
    $('#initialize').click(function() { 
     $("#speed").selectmenu(); 
     $('#status').html('The widget is now initialized. But it is still empty and does not contain any options.'); 
     $('#add_options').removeAttr('disabled'); 
     $('#initialize').attr('disabled',''); 
    }); 


     $('#add_options').click(function() { 
     // Add a new option to the dropdown 
     $('#speed').append($('<option>', { 
      value: 1, 
      text: 'Option 1' 
     })); 
     $('#speed').append($('<option>', { 
      value: 2, 
      text: 'Option 2' 
     })); 
     $('#speed').append($('<option>', { 
      value: 3, 
      text: 'Option 3' 
     })); 
     //Refresh the selectmenu widget so the newly added options to the dropdown are now loaded properly 
     $('#speed').selectmenu("refresh"); 

     $('#status').html('The new options are now added dynamically!!'); 
     $('#select_option').removeAttr('disabled'); 
     $('#add_options').attr('disabled',''); 
    }); 

    $('#select_option').click(function() { 
     $('#speed').val(3); 
     $('#speed').selectmenu("refresh"); 

     $('#status').html('Options 3 is now selected!!'); 
     $('#select_option').attr('disabled',''); 
    }); 
    }); 
    </script> 

<div class="demo"> 
<input type="button" value="Initialize the Widget" id="initialize"/> 
<br><br> 
<input type="button" value="Dynamically Add New Options" id="add_options" disabled/> 
<br><br> 
<input type="button" value="Select the 'Option 3'" id="select_option" disabled/> 
<form action="#"> 
    <br> 
    <div id="status" style="font-weight:bold;">This is the simple default HTML dropdown</div> 
    <br> 
    <label for="speed">Select a speed</label> 
    <select name="speed" id="speed"> 
    </select> 

</form> 

</div>