jQuery调用getJSON后给SELECT赋值成功但页面不显示问题

问题原因 #

这个问题和getJSON的异步逻辑本身没有关系，90%以上的场景是你的页面引入了下拉美化组件（Select2/Bootstrap Select等）或者表单验证插件，这些组件会在初始化后监听select的change事件同步视图/验证状态。你在全局直接赋值的时候组件还没初始化完成，所以修改原生值会直接生效；但异步回调执行时组件已经初始化完成，仅修改原生select的value不会触发组件更新，就会出现“值已经改了但页面显示不对”的情况。

解决方案 #

按优先级依次尝试以下方法即可解决：

• 先确认getJSON回调正常执行：在回调内打印日志确认请求没有报错、回调逻辑没有被中断，排除请求异常导致赋值代码没运行的情况。
• 设值后手动触发change事件：这是兼容绝大多数场景的通用解决方案，触发change事件后相关组件会自动同步状态：

var id = $(this).data('id');
$.getJSON('getevent.php', { id: id }, function(event) {
  $('#category').val('test').trigger('change');
});

• 若使用了特定下拉组件，调用对应官方更新方法：
  • 使用Select2的场景：直接调用组件赋值方法$('#category').select2('val', 'test')
  • 使用Bootstrap Select的场景：设值后调用刷新方法$('#category').selectpicker('refresh')
• 兜底兼容方案：直接操作option的selected属性，避免部分浏览器下val()方法的兼容问题：

$.getJSON('getevent.php', { id: id }, function(event) {
  $('#category option[value="test"]').prop('selected', true).trigger('change');
});

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