如何实现选择菜单提交选中值后跳转至对应HTML页面？

首先你的原始代码存在几个问题：

• 多个<select>使用了相同的id="cars"，这不符合HTML规范，id必须唯一
• 缺少处理选中值并生成跳转链接的逻辑

下面是修正后的完整实现方案：

完整代码示例 #

<!DOCTYPE html>
<html>
<body>
  <h1>CAR</h1>

  <label for="car1">Choose a car:</label>
  <select id="car1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br><br>

  <label for="car2">Choose a car:</label>
  <select id="car2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br><br>

  <label for="car3">Choose a car:</label>
  <select id="car3">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br><br>

  <button id="submitBtn">OK</button>

  <script>
    // 获取OK按钮元素
    const submitBtn = document.getElementById('submitBtn');
    
    // 监听按钮点击事件
    submitBtn.addEventListener('click', function() {
      // 收集所有选择框的选中值
      const selectElements = document.querySelectorAll('select');
      const selectedValues = [];
      
      selectElements.forEach(select => {
        selectedValues.push(select.value);
      });
      
      // 处理选中值：转为首字母大写并按下划线拼接（匹配你示例中的文件名格式）
      const formattedValues = selectedValues.map(val => val.charAt(0).toUpperCase() + val.slice(1));
      const fileName = formattedValues.join('_') + '.html';
      
      // 构造目标URL并在新窗口打开
      // 这里假设目标HTML文件和当前页面在同一目录下，可根据实际路径调整
      const targetUrl = './' + fileName;
      window.open(targetUrl, '_blank');
    });
  </script>
</body>
</html>

关键说明 #

• 把重复的id="cars"改成了唯一的car1、car2、car3，确保HTML结构合法
• 使用document.querySelectorAll('select')批量获取所有选择框元素
• 通过JavaScript收集每个选择框的选中值，格式化为首字母大写后用下划线拼接成文件名
• 点击OK按钮时，用window.open()在新窗口打开对应命名的HTML页面

注意：你需要确保服务器或本地目录中存在对应命名的HTML文件（比如Saab_Volvo_Audi.html），否则会出现404错误。

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