使用jQuery Ajax提交PHP表单时下拉参数名显示undefined的解决方法

原Ajax代码的选择器匹配到了无name属性的DOM节点，导致序列化参数异常：

• 下拉列表的name属性定义在父级<select>标签上，被选中的<option>标签本身不携带name属性
• jQuery序列化表单元素的逻辑为：读取当前匹配DOM节点的name属性作为提交参数的键、读取节点取值作为参数值
• 当选择器匹配到<option>节点时，读取到的name值为undefined，最终生成了键为undefined的错误参数

调整选择器规则，将原匹配option:selected的部分，替换为匹配外层带name属性的<select>标签即可，无需手动获取选中项：

$.ajax({
        url: 'index.php?route=data/save',
        type: 'post',
        // 修改第三段选择器，直接选取select元素
        data: $('#save-method input[type=\'radio\']:checked, #save-method textarea, #save-method select'),
        dataType: 'json',
})

调整后，jQuery会自动读取每个匹配元素的name作为参数键，对<select>控件自动提取其选中项的值作为参数值，最终提交的参数结构为：

{
  "room": "room.4",
  "set_schedule": "2021-03-26",
  "comment": "please ontime"
}

如果#save-method容器内所有需要提交的表单控件都配置了合法的name属性，可省去手动枚举控件类型的步骤，直接对容器做整体序列化，从根源上避免选择器匹配错节点的问题：

$.ajax({
        url: 'index.php?route=data/save',
        type: 'post',
        data: $('#save-method').serialize(),
        dataType: 'json',
})

• 所有需要提交的表单控件必须配置合法的name属性，未设置name的控件不会被纳入提交参数
• 序列化时不要将option等无name属性的子元素作为选择器匹配目标，优先选取外层定义了name的原生表单控件

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