如何在表单提交前获取select列表选中值并用作网页变量

没问题，这在前端开发里是很常见的需求，我给你两种实用的实现方式，你可以根据自己的业务场景来选：

方法一：实时监听选中变化（即时获取值） #

如果你需要在用户选中选项的瞬间就拿到值并做操作（比如实时更新页面内容），可以监听select的change事件：

首先给你的表单和select加个id，方便快速获取元素（用name属性也可以，id定位更高效）：

<form id="myForm">
  <select name="test" id="testSelect">
    <option value="111">Something 1</option>
    <option value="222">Something 2</option>
    <option value="333">Something 3</option>
  </select>
  <button type="submit">提交表单</button>
</form>

然后用原生JavaScript监听事件并获取值：

// 获取select元素
const testSelect = document.getElementById('testSelect');

// 监听选中变化事件
testSelect.addEventListener('change', function() {
  // 拿到当前选中的value值
  const selectedValue = this.value;
  
  // 把值存到全局变量（或者你需要的变量作用域里）
  window.selectedOption = selectedValue;
  
  // 这里就可以做你需要的后续操作了，比如打印到控制台
  console.log('用户刚选中了：', selectedValue);
  // 或者更新页面上的提示文本
  // document.getElementById('tipText').textContent = `选中的值是${selectedValue}`;
});

方法二：表单提交前获取值（适合提交时统一处理） #

如果只需要在用户点击提交按钮时才获取值，可以监听表单的submit事件，在提交前拿到值：

const myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(e) {
  // 先阻止表单默认提交行为，避免页面直接跳转
  e.preventDefault();
  
  // 获取select当前选中的值
  const selectedValue = document.getElementById('testSelect').value;
  
  // 这里把值作为变量进行后续操作，比如验证、发送请求等
  console.log('提交前获取到的选中值：', selectedValue);
  
  // 处理完你的逻辑后，还可以手动提交表单
  // this.submit();
});

小提示 #

• 如果不想用id，也可以通过name属性获取元素：document.querySelector('select[name="test"]')
• 除了value，你还可以通过this.options[this.selectedIndex].text拿到选项的显示文本（比如"Something 1"）

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