jquery-ui selectmenu - Encountered "no such method 'instance' for menu widget instance" while loading dropdown options dynamically

Question

I have a drop down list(select list) with ID TestList.

I want to use this as selectmenu from jQuery UI. This drop down is getting dynamically populated so initially there are no options to this select list. In the scripts section, I am first initializing the select list with select menu as:

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

Next, I want to dynamically populate it with data, so I am doing this:

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

But the problem is, it throws Uncaught Error: no such method 'instance' for menu widget instance.

I followed How to select an option in a jQuery ui selectmenu dynamically? but the problem still persists. I am using the latest jQuery UI package(jquery-ui-1.12.1.custom) and jQuery 1.9 Please help me solve this issue.. List:

In your source code can you please provide the array for data? And do you want select the option with value refresh? — Rahul Gupta
– Rahul Gupta, Commented Dec 28, 2017 at 9:03
Are you asking the potential values of data? If so, then the array would contain values of color like 'red', 'blue', 'green' etc. Also, yes I want to store selected value in DB hence I am using refresh. — Del Monte
– Del Monte, Commented Dec 28, 2017 at 9:17

Rahul Gupta · Accepted Answer · 2017-12-28 12:02:48Z

1

I have created a DEMO.

This DEMO:

Dynamically initializes the selectmenu widget on the HTML dropdown

Dynamically create/load options

Dynamically select a specific option in the dropdown

I think it would of great help to you!

Here is the complete code from the 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>

edited Dec 28, 2017 at 12:02

answered Dec 28, 2017 at 9:46

Rahul Gupta

10.2k7 gold badges66 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Del Monte Over a year ago

Brilliant work done there mate! But I am still getting Uncaught Error: no such method 'instance' for menu widget instance. on page load i.e even before populating the list the error is shown on the console. I am using jQuery 1.9. Is this the reason?

Del Monte Over a year ago

I guess it was because I had written inside document.ready function so it seems to have been solved :)

Rahul Gupta Over a year ago

Glad to help you :)

Del Monte Over a year ago

The select list looks weird. It's height and width are not proper.. This is originally a bootstrap select list. Is this the reason for such deformity?

Rahul Gupta Over a year ago

If you would use multiple jquery plugins to manipulate the HTML elements then they would surely cause layout issues because the css rules would conflict

Collectives™ on Stack Overflow

jquery-ui selectmenu - Encountered "no such method 'instance' for menu widget instance" while loading dropdown options dynamically

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related