title: Set a jQuery UI selectmenu to a specific option by javascript
body: <p>I have a selectmenu like the following</p>
  
  <pre><code>&lt;select name="scale" id="scale"&gt;
    &lt;option selected&gt;linear&lt;/option&gt;
    &lt;option&gt;root&lt;/option&gt;
    &lt;option&gt;square&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>To make it nice I use jQuery UI v1.11.2.</p>
  
  <pre><code>$('#scale').selectmenu();
  </code></pre>
  
  <p>I can now read the value of the dropdown by</p>
  
  <pre><code>alert($('#scale').val());
  </code></pre>
  
  <p>which results in 'linear' as the answer. I can also set the value to 'square' by using</p>
  
  <pre><code>$('#scale').val('square');
  alert($('#scale').val());
  </code></pre>
  
  <p>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 <code>.change()</code> but without any effect. I also tried answers like in <a href="https://stackoverflow.com/questions/9917516/jquery-ui-selectmenu-value-set-dynamically-does-not-change-visible-selected-valu/9917781#9917781">jQuery UI Selectmenu value set dynamically does not change visible selected value</a> but failed. Any <code>$('#scale').selectmenu('value', 'square');</code> resuts in the error message <code>Error: no such method 'value' for selectmenu widget instance</code>.</p>
  
  <p>Can anyone help how to refresh the widget after setting it to a new value?</p>