根据下拉选项修改HTML表单action时提交路径出现NaN.php异常问题

你遇到的这个问题其实是两个小错误叠加导致的，咱们一步步拆解：

错误1：获取data-action的对象错了 #

你的HTML里，data-action属性是定义在<option>标签上的，但你的jQuery代码里却在尝试从<select>元素（也就是$('#r')对应的DOM节点）上获取这个属性——<select>本身根本没有data-action，所以$(this).attr("data-action")会返回undefined。

错误2：多余的加号触发了无效的类型转换 #

你在$(this).attr("data-action")前面加了个+号，这个操作会尝试把拿到的undefined转换成数字类型，结果自然就是NaN（Not a Number）。浏览器识别到无效的action路径后，就自动补成了你看到的/NaN.php。

修正后的代码 #

这里给你两种正确的写法，选哪种都可以：

写法1：用attr()获取选中选项的属性

$('#r').change(function() {
  // 先定位到当前选中的option，再取它的data-action
  const targetPath = $(this).find('option:selected').attr('data-action');
  $("form").attr("action", targetPath);
});

写法2：用jQuery的data()方法（更推荐）

jQuery的data()方法可以直接读取data-*系列属性，写法更简洁：

$('#r').change(function() {
  const targetPath = $(this).find('option:selected').data('action');
  $("form").attr("action", targetPath);
});

这样修改后，当你选择不同的选项时，表单的action就会被正确设置为对应option的data-action值，不会再出现NaN的问题了。

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