Set a jQuery UI selectmenu to a specific option by javascript

Question

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?

Answer 1

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]