JavaScript实现下拉框提交后跳转页面展示结果求助

嘿，刚接触JavaScript不用慌，这个需求其实很容易搞定！你现在已经能弹窗显示值了，只需要把弹窗逻辑改成打开新页面并传递参数，再在新页面接收展示就行。我给你分步骤拆解：

第一步：修改原页面的JavaScript函数 #

把你现有的myFunction()替换成下面的代码，它会获取下拉框选中的值，通过URL参数的方式传递到新页面：

function myFunction() {
  // 获取下拉框元素
  const selectElement = document.getElementById('mySelect');
  // 拿到选中的选项值
  const selectedValue = selectElement.value;
  // 打开新页面，用URL参数传递选中值（encodeURIComponent处理特殊字符）
  window.open(`result.html?value=${encodeURIComponent(selectedValue)}`, '_blank');
}

第二步：创建新的落地页（result.html） #

新建一个名为result.html的文件，写入下面的代码，它会读取URL里的参数并把结果展示出来：

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Ergebnis</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      max-width: 800px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <h1>Ihr Ergebnis</h1>
  <div id="resultDisplay" style="font-size: 1.2rem; margin-top: 1rem;"></div>

  <script>
    // 解析URL中的参数
    const urlParams = new URLSearchParams(window.location.search);
    const selectedValue = urlParams.get('value');
    
    // 将结果渲染到页面
    const resultDisplay = document.getElementById('resultDisplay');
    if (selectedValue) {
      resultDisplay.textContent = selectedValue;
    } else {
      resultDisplay.textContent = "Kein gültiger Wert ausgewählt!";
    }
  </script>
</body>
</html>

第三步：放置文件并测试 #

把原页面（比如你的index.html）和result.html放在同一个文件夹下，打开原页面选择下拉框选项，点击按钮就能在新页面看到选中的内容啦！

要是之后想传递更多数据（比如邮箱输入框的值），也可以用同样的逻辑：在URL里追加参数（比如&email=${encodeURIComponent(emailValue)}），然后在result.html里用urlParams.get('email')获取即可。

内容的提问来源于stack exchange，提问作者Ben.R.