基于下拉框选择值通过JavaScript修改表单action属性

没问题，这事儿很容易搞定，我给你两种原生JavaScript的实现方案，你可以根据自己的代码结构来选：

先准备基础HTML结构 #

首先咱们得有一个带下拉框和提交按钮的表单，示例结构大概是这样：

<form id="myForm">
  <select id="actionSelector">
    <option value="/submit-to-page-a">提交到页面A</option>
    <option value="/submit-to-page-b">提交到页面B</option>
    <option value="/submit-to-page-c">提交到页面C</option>
  </select>
  <button type="button" id="setActionBtn">设置并提交</button>
</form>

方案一：绑定按钮点击事件（最直观） #

这种方式就是给按钮加一个点击监听，每次点击时获取下拉框的选中值，然后直接赋值给表单的action属性，甚至可以顺便提交表单：

// 获取页面元素
const form = document.getElementById('myForm');
const selector = document.getElementById('actionSelector');
const btn = document.getElementById('setActionBtn');

// 绑定点击事件
btn.addEventListener('click', function() {
  // 获取下拉框选中的value值
  const selectedAction = selector.value;
  // 设置表单的action属性
  form.action = selectedAction;
  
  // 如果需要点击按钮后直接提交表单，就加上这行
  // form.submit();
});

方案二：监听下拉框变化（提前设置action） #

如果你想让用户选完下拉框之后，表单的action就自动更新，不用等点击按钮，也可以监听下拉框的change事件：

const form = document.getElementById('myForm');
const selector = document.getElementById('actionSelector');

selector.addEventListener('change', function() {
  form.action = this.value;
});

// 然后按钮只负责提交就行
document.getElementById('setActionBtn').addEventListener('click', function() {
  form.submit();
});

几个小提醒 #

• 一定要确保下拉框的每个<option>都正确设置了value属性，这个值就是你要赋值给表单的action地址
• 如果你的表单是用name而非id标识的，也可以用document.forms['表单name']来获取表单元素
• 要是你用jQuery的话，代码会更简洁，比如：

$('#setActionBtn').click(function() {
  $('#myForm').attr('action', $('#actionSelector').val());
  // $('#myForm').submit();
});

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