提交表单时根据选中选项修改HTML form action失效问题

先来说说你的代码哪里出问题了：

• 你在submit事件里用$(this).children(':selected')，这里的this是form元素，而<option>是嵌套在<select>里面的，并不是form的直接子元素，所以这个选择器根本找不到选中的option，自然没法获取到data-action的值，action也就改不了。
• 另外，你先调用了event.preventDefault()阻止提交，修改action后再调用$(this).submit()，这会再次触发submit事件，可能导致不必要的循环（虽然浏览器可能会拦截，但这不是优雅的写法）。

修复后的代码方案 #

方案1：修正选择器，优化提交逻辑 #

$("form").submit(function(event) {
  // 精准定位到选择框里的选中项
  const selectedAction = $("#r option:selected").attr("data-action");
  // 直接修改当前表单的action属性
  $(this).attr("action", selectedAction);
  // 这里不需要阻止默认行为，修改完成后让表单正常提交即可
});

如果确实需要先做一些异步处理再提交，可以这样避免循环：

$("form").submit(function(event) {
  event.preventDefault();
  const form = this;
  const selectedAction = $("#r option:selected").attr("data-action");
  form.action = selectedAction;
  // 用原生submit方法，不会再次触发jQuery绑定的submit事件
  form.submit();
});

方案2：实时修改action（更优雅的写法） #

其实可以在用户切换选择框的时候就直接修改表单的action，这样提交时不需要额外处理：

// 监听选择框变化事件
$("#r").change(function() {
  const selectedAction = $(this).find(":selected").attr("data-action");
  $("form").attr("action", selectedAction);
});

// 页面加载完成时，初始化表单的默认action
$(document).ready(function() {
  const initialAction = $("#r option:selected").attr("data-action");
  $("form").attr("action", initialAction);
});

关键细节解释 #

• 选择器要精准：必须先定位到<select id="r">，再找它内部的选中option，用$("#r option:selected")或者$("#r").find(":selected")都可以。
• 避免循环提交：如果用submit事件处理，优先直接修改action后让表单默认提交；如果必须阻止默认行为，建议使用原生DOM元素的submit()方法，不会再次触发jQuery绑定的submit事件循环。

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