jQuery实现表单实时预览时select下拉选项切换不触发更新如何解决

问题根源：你的代码仅监听了普通输入框、文本域的keyup事件，而下拉选择框select切换选项、文件选择框选择文件时都不会触发keyup事件，因此预览更新逻辑不会执行。

修改方案 #

1. 调整事件绑定规则，新增对select元素的监听，同时增加change事件适配下拉切换、文件选择的场景
2. 将预览更新逻辑抽为公共函数，避免重复代码

修改后的完整JS代码如下：

$(document).ready(function() {
  // 抽离公共的预览更新函数
  function updatePreview() {
    var data = new FormData();

    //Form data
    var form_data = $('#my_form').serializeArray();
    $.each(form_data, function(key, input) {
      data.append(input.name, input.value);
    });

    //File data
    var file_data = $('input[name="my_images"]')[0].files;
    for (var i = 0; i < file_data.length; i++) {
      data.append("my_images[]", file_data[i]);
    }

    //Custom data
    data.append('key', 'value');

    $.ajax({
      url: "test.php",
      method: "post",
      processData: false,
      contentType: false,
      data: data,
      success: function(data) {
        console.log(data);
        $('#preview').html(data);
      },
      error: function(e) {
        //error
      }
    });
  }

  // 绑定事件：新增select元素，同时监听keyup和change事件
  $("#my_form input,textarea,select").on("keyup change", function() {
    // 可选：加防抖，避免连续输入频繁发请求，这里设置300ms延迟，不需要可以去掉以下两行直接调用updatePreview()
    clearTimeout(window.previewTimer);
    window.previewTimer = setTimeout(updatePreview, 300);
  });
});

核心修改说明 #

• 选择器新增了select，覆盖下拉选择框元素
• 事件从仅监听keyup改为同时监听keyup+change，change事件会在下拉选项切换、文件选择完成时触发
• 可选添加的防抖逻辑可以减少输入过程中不必要的接口调用，不需要可以直接删除防抖代码，直接在事件回调中执行updatePreview()即可

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