jquery-ui selectmenu - "keine solche Methode 'Instanz' für Menü Widget-Instanz" beim dynamischen Laden Dropdown-Optionen

Question

Ich habe eine Dropdown-Liste (Auswahlliste) mit ID TestList.

Ich möchte dies als selectmenu von jQuery UI verwenden. Diese Dropdown-Liste wird dynamisch ausgefüllt, sodass zu dieser Auswahlliste zunächst keine Optionen verfügbar sind. Im Abschnitt Skripte, ich zuerst die Auswahlliste mit ausgewähltem Menü Initialisierung als:

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

Als nächstes mag ich es dynamisch füllen mit Daten, so dass ich tue dies:

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

Aber Das Problem ist, es wirft Uncaught Error: keine solche Methode 'Instanz' für Menü-Widget-Instanz.

Ich folgte How to select an option in a jQuery ui selectmenu dynamically?, aber das Problem besteht immer noch. Ich bin mit dem neuesten jQuery UI-Paket (jquery-ui-1.12.1.custom) und jQuery 1.9 Bitte helfen Sie mir dieses Problem zu lösen .. Liste:

Answer 1

ich ein DEMO geschaffen habe.

Diese 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

denke ich es Ihnen eine große Hilfe wäre!

Dies ist der komplette Code aus der 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>