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?

It should work as you expect it to if you just call refresh after using .val(): $("#scale").selectmenu("refresh"); — blgt
– blgt, Commented Nov 17, 2014 at 12:28
@blgt please post that as an answer. Don't leave questions unanswered by answering in comments... — T J
– T J, Commented Nov 17, 2014 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
– blgt, Commented Nov 17, 2014 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
– T J, Commented Nov 17, 2014 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
– blgt, Commented Nov 17, 2014 at 16:51

blgt · Accepted Answer · 2014-11-17 16:12:27Z

76

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]

answered Nov 17, 2014 at 16:12

blgt

8,2151 gold badge27 silver badges29 bronze badges

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

2 Comments

Yusril Maulidan Raji Over a year ago

You can also make it in one line $('#scale').val('square').selectmenu("refresh");

Dave Cousineau Over a year ago

I thought this didn't work but I realized the value I was setting was not present

Collectives™ on Stack Overflow

Set a jQuery UI selectmenu to a specific option by javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related