jQuery仅序列化修改字段实现及select change事件失效问题

一、修复select字段change事件无响应问题 #

你的问题大概率是选择器#post .details form .field没有覆盖到select元素——要么select标签本身没有.field类，要么它的父容器不是.field。直接将事件绑定到表单内所有标准表单控件更可靠：

方案1：直接绑定所有表单控件 #

events: function() {
  // 覆盖input、select、textarea三类表单控件的change事件
  this.$body.on('change', '#post .details form input, #post .details form select, #post .details form textarea', this.functions.changeField.bind(this));
}

方案2：如果.field是控件容器类 #

如果你的.field是包裹表单控件的容器，就监听容器内的所有控件：

events: function() {
  this.$body.on('change', '#post .details form .field input, #post .details form .field select, #post .details form .field textarea', this.functions.changeField.bind(this));
}

二、优化仅提交修改字段的逻辑（避免误判改回原值的字段） #

单纯依赖change事件加类存在漏洞：如果用户修改字段后又改回初始值，这个字段不该被提交。建议先保存初始值，再对比判断：

1. 页面初始化时保存字段初始值 #

init: function() {
  // 给所有表单字段添加初始值的data属性
  $('#post .details form input, #post .details form select, #post .details form textarea').each(function() {
    $(this).data('original-value', $(this).val());
  });
}

2. 修改change事件处理函数 #

functions: {
  changeField: function (e) {
    const $field = $(e.currentTarget);
    const originalValue = $field.data('original-value');
    const currentValue = $field.val();
    
    // 只有值真的变化时才标记，改回原值则移除标记
    if (currentValue !== originalValue) {
      $field.addClass('changed');
    } else {
      $field.removeClass('changed');
    }
  }
}

3. 提交时仅收集标记为changed的字段 #

不再使用serialize()，手动构建提交数据集：

// 构建修改字段的数据集
const changedData = {};
$('#post .details form .changed').each(function() {
  const $field = $(this);
  changedData[$field.attr('name')] = $field.val();
});

// AJAX提交修改的数据
$.ajax({
  url: action,
  data: changedData,
  type: "POST"
  // 可添加success/error回调等配置
});

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