jquery-ui selectmenu - 遇到＆＃34;没有这样的方法＆＃39;实例＆＃39;对于菜单小部件实例＆＃34;同时动态加载下拉选项

Question

我有一个标识为selectmenu的下拉列表（选择列表）。

我想在jQuery UI中将其用作$("#TestList").selectmenu(); 。此下拉列表将动态填充，因此最初此选择列表没有选项。 在脚本部分，我首先使用选择菜单初始化选择列表：

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

接下来，我想用数据动态填充它，所以我这样做：

class Service::Fs::Account < DelegateClass(Bank::Account)
  extend SingleForwardable

  def initialize(args={})
    @account = Bank::Account.new(args)
    super(@account)
  end

  def_delegators :"Bank::Account", :all, :create, :update
end

但问题是，它会抛出 Uncaught Error：没有这样的方法＆＃39;实例＆＃39;用于菜单小部件实例。

我跟着How to select an option in a jQuery ui selectmenu dynamically?，但问题仍然存在。 我正在使用最新的jQuery UI包（jquery-ui-1.12.1.custom）和jQuery 1.9 请帮我解决这个问题.. 列表：

Answer 1

我创建了一个DEMO。

本演示：

  

  
1. 动态初始化HTML下拉列表中的selectmenu小部件
  
2. 动态创建/加载选项
  
3. 在下拉列表中动态选择特定选项
  

我认为这对你有很大的帮助！

以下是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>