29

I have a selectmenu like the following

<select name="scale" id="scale">
  <option selected>linear</option>
  <option>root</option>
  <option>square</option>
</select>

To make it nice I use jQuery UI v1.11.2.

$('#scale').selectmenu();

I can now read the value of the dropdown by

alert($('#scale').val());

which results in 'linear' as the answer. I can also set the value to 'square' by using

$('#scale').val('square');
alert($('#scale').val());

which correctly gives the answer 'square'. But (!!!) the dropdown does not display this on the screen. So actually I can set and read the value, but the visual representation doesn't change - the widget does not refresh. I read somewhere to throw a .change() but without any effect. I also tried answers like in jQuery UI Selectmenu value set dynamically does not change visible selected value but failed. Any $('#scale').selectmenu('value', 'square'); resuts in the error message Error: no such method 'value' for selectmenu widget instance.

Can anyone help how to refresh the widget after setting it to a new value?

Community
  • 1
  • 1
Steevie
  • 630
  • 1
  • 6
  • 19
  • 4
    It should work as you expect it to if you just call [`refresh`](http://api.jqueryui.com/selectmenu/#method-refresh) after using `.val()`: `$("#scale").selectmenu("refresh");` – blgt Nov 17 '14 at 12:28
  • @blgt please post that as an answer. Don't leave questions unanswered by answering in comments... – T J Nov 17 '14 at 16:05
  • @TJ Done. I'd say this question is better off closed though, as it's not very likely to help anyone other than the OP (thus the comment and the close-vote) – blgt Nov 17 '14 at 16:13
  • @blgt Hmm I think this might help someone in future, unless it is an exact duplicate of the question mentioned in the original post... – T J Nov 17 '14 at 16:21
  • @TJ No, the linked question is about a separate plugin called *selectmenu*. The `selectmenu` here is a new widget in the latest incarnation of the $.ui; whether the two are linked in any way I have no idea :) The close-vote was an opinion, I admit on a second glance I may have been wrong – blgt Nov 17 '14 at 16:51

1 Answers1

72

It should work as you expect it to if you just call refresh after using .val(): 

$('#scale').val('square');
$("#scale").selectmenu("refresh");

The reason for this is that the .val() function is provided by jQuery, while the widget is part of jQueryUI. [presumably the $.ui authors didn't want to alter the $ functionality, though this is purely speculation on my part]

blgt
  • 8,135
  • 1
  • 25
  • 28