如何使用jQuery UI .selectmenu实现信用卡有效期自动同步选中？

我太懂你的困扰了——用jQuery UI的selectmenu把原生下拉转成自定义UI后，直接改原生select的选中值根本不会同步到前端显示，毕竟这个组件有自己独立的DOM结构（就是你看到的带.ui-selectmenu-text的那个span）。别慌，两步就能搞定这个问题：

核心逻辑 #

jQuery UI的selectmenu本质是原生select的UI包装器，所以得先更新原生select的选中状态，再通知组件刷新UI，这样就能让有效期自动显示在下拉按钮上，不用点进去才看到选中值。

具体实现步骤 #

假设你已经从保存的卡片数据里拿到了有效期月份（比如savedMonth = "05"）和年份（savedYear = "2028"），照着下面的代码来：

1. 更新原生select的选中值
   先给原始的月份/年份select设置对应的值：

// 设置月份
$("#Mon").val(savedMonth);
// 设置年份（假设年份select的id是Year）
$("#Year").val(savedYear);

如果你习惯用prop()标记选中状态也可以，效果完全一样：

$("#Mon05").prop("selected", true);

2. 调用selectmenu的refresh方法同步UI
   这一步是关键！改完原生select后，必须调用组件的refresh方法，让它重新读取原生select的状态并更新前端显示：

$("#Mon").selectmenu("refresh");
$("#Year").selectmenu("refresh");

完整的事件处理示例 #

把上面的逻辑放进你选择已保存卡片的处理函数里，比如：

// 用户选择已保存卡片时触发的函数
function onSavedCardSelected(cardData) {
   // 填充PAN输入框
   $("#panInput").val(cardData.pan);
   
   // 同步有效期月份
   $("#Mon").val(cardData.expMonth).selectmenu("refresh");
   // 同步有效期年份
   $("#Year").val(cardData.expYear).selectmenu("refresh");
}

这样操作后，用户选完已保存卡片，有效期的下拉按钮就会直接显示对应的月份和年份，不用点下拉菜单才能看到选中状态啦～

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