Установите jQuery UI selectmenu для определенной опции с помощью javascript

У меня есть selectmenu, как показано ниже.

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

Чтобы сделать его приятным, я использую jQuery UI v1.11.2.

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

Теперь я могу прочитать значение раскрывающегося списка

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

что приводит к "линейному" в качестве ответа. Я также могу установить значение "квадрат", используя

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

который правильно дает ответ "квадрат". Но (!!!) выпадающее меню не отображает это на экране. Поэтому на самом деле я могу установить и прочитать значение, но визуальное представление не меняется - виджет не обновляется. Я где-то читал, чтобы выбросить .change(), но без какого-либо эффекта. Я также пробовал ответы, например, в Значение jquery UI Selectmenu динамически не меняет видимое выбранное значение, но не удалось. Любые $('#scale').selectmenu('value', 'square'); отображаются в сообщении об ошибке Error: no such method 'value' for selectmenu widget instance.

Может ли кто-нибудь помочь, как обновить виджет после установки его на новое значение?

Ответ 1

Он должен работать так, как вы ожидаете, если вы просто вызовете refresh после использования .val():

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

Причиной этого является то, что функция .val() предоставляется jQuery, а виджет является частью jQueryUI. [предположительно авторы $.ui не хотели изменять функциональность $, хотя это чисто спекуляция с моей стороны]