如何避免更新选中项时jquery-ui selectmenu响应变慢？

你的问题我太熟悉了——手动修改原生select的selectedIndex再调用refresh确实会踩这个坑！jQuery UI的selectmenu('refresh')在这种场景下不会正确清理旧的DOM包装器，反复调用就会导致页面里堆积大量冗余元素，自然越来越卡。

给你一个更优雅且性能友好的解决方案：直接使用selectmenu组件提供的value方法来设置选中项，这是官方推荐的方式，内部会正确处理状态同步和DOM清理，不会产生冗余元素。

优化后的代码 #

function setOption(menuId, optionValue) {
  $(menuId).selectmenu('value', optionValue);
}

为什么这个方法更好？ #

• 这是selectmenu组件的原生API，完全适配组件的内部逻辑，会同步更新原生select的选中状态和UI层的显示
• 调用时组件会自动处理旧DOM元素的移除和新元素的渲染，不会出现重复创建wrapper的问题
• 代码更简洁，不需要手动计算选项索引，减少出错概率

如果之后你需要动态更新整个选项列表（比如新增/删除选项），再调用selectmenu('refresh')才是合理的，但单纯更新选中项的话，用value方法就足够了。

内容的提问来源于stack exchange，提问作者Stephan Krohn