jquery-ui - 通过 javascript 将 jQuery UI 选择菜单设置为特定选项

Question

我有一个如下所示的选择菜单

<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());

结果是“线性”作为答案。我还可以使用将值设置为“square”

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

正确给出答案“正方形”。但是(!!!)下拉菜单不会在屏幕上显示这一点。所以实际上我可以设置和读取该值，但视觉表示不会改变 - 小部件不会刷新。我在某处读到抛出 .change() 但没有任何效果。我也尝试了类似 jQuery UI Selectmenu value set dynamically does not change visible selected value 中的答案但失败了。任何 $('#scale').selectmenu('value', 'square'); 都会导致错误消息 Error: no such method 'value' for selectmenu widget instance.

任何人都可以帮助如何在将小部件设置为新值后刷新小部件吗？

Answer 1

如果您只需调用refresh，它应该会按照您的预期工作。使用 .val() 后:

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

原因是 .val() 函数是 jQuery 提供的，而 widget 是 jQueryUI 的一部分。 [大概 $.ui 作者不想改变 $ 功能，尽管这纯粹是我的猜测]