如何获取HTML <select>的值并设置为<form>的action属性？

嘿，欢迎加入Stack Overflow！很高兴帮你搞定这个问题😉

要实现选中select选项后自动把值赋值给form的action属性，我们可以通过HTML结构调整+JavaScript事件监听来完成，下面是具体步骤：

1. 调整HTML结构（给元素加标识） #

首先给你的<select>和<form>加上id，这样我们能轻松定位到它们：

<div class="panel-body">
  <select id="fileTypeSelect" required>
    <option value="#">Select Type of File</option>
    <option value="upload1.php">uno</option>
    <option value="upload2.php">dos</option>
    <option value="upload3.php">tres</option>
  </select>
  <form id="uploadForm" name="yourFormName" method="POST" enctype="multipart/form-data">
    <!-- 这里放你的表单内容，比如文件输入框、提交按钮等 -->
    <input type="file" name="uploadFile" required>
    <button type="submit">提交上传</button>
  </form>
</div>

注意：如果是文件上传表单，一定要加上enctype="multipart/form-data"属性，否则文件无法正常提交哦。

2. 用JavaScript实现动态赋值 #

这里有两种常用的实现方式，你可以根据需求选：

方式一：实时更新（选完就改） #

当用户切换select选项时，立刻更新form的action：

// 获取页面上的select和form元素
const fileSelect = document.getElementById('fileTypeSelect');
const uploadForm = document.getElementById('uploadForm');

// 监听select的选择变化事件
fileSelect.addEventListener('change', function() {
  // 检查用户是否选了有效的选项（不是默认的#）
  if (this.value !== '#') {
    uploadForm.action = this.value;
  } else {
    // 选回默认项时，可以清空action或者提示用户
    uploadForm.action = '';
    alert('请选择一个有效的文件类型哦');
  }
});

方式二：提交前更新（点击提交时再改） #

如果不想实时修改action，也可以在用户点击提交按钮时再设置，同时还能做有效性校验：

const uploadForm = document.getElementById('uploadForm');
const fileSelect = document.getElementById('fileTypeSelect');

// 监听表单的提交事件
uploadForm.addEventListener('submit', function(e) {
  // 先检查用户有没有选有效选项
  if (fileSelect.value === '#') {
    e.preventDefault(); // 阻止表单提交
    alert('请先选择文件类型！');
    return;
  }
  // 确认有效后，设置form的action
  this.action = fileSelect.value;
});

小提示 #

• 给元素加id是最直接的定位方式，比类选择器或者其他选择器更高效。
• 如果你的表单不需要实时更新action，方式二更合适，减少不必要的DOM操作。

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