时间戳

首页 > 解决方案 > 如何使用提交按钮添加多个下拉表单组合值并制作另一个html页面名称去它

javascript - 如何使用提交按钮添加多个下拉表单组合值并制作另一个html页面名称去它

问题描述

我希望提交按钮对表单中两个不同下拉菜单中的组合值起作用。这将是一个 html 页面名称。

例如... west 和 winter 是一个不同的选项，它将创建 "westwinter.html" 然后 west 和 summer 是一个不同的选项，它将创建 "westsummer.html" 。并单击提交按钮，创建的页面将加载。我已经创建了名为（例如 westwinter.html）的此类 html 页面。

我努力了好几天才能完成这项工作。我觉得这一定是可能的。请帮忙！

这是我使用的代码。当我将值替换为页面名称 (ex. westsummer.html) 时。该页面将在提交 (go) 时加载。我希望计算第一个下拉列表和第二个下拉列表的值，结果应该是提交时的页面名称。最后应该有 16 个不同的 html 页面名称。我想要这个带有 jQ​​uery 或 javascript 的解决方案。

  <div class="selCont">
  <h2>pick an option</h2>

  <select id="selection" name="selection">
  <option value="1">West</option>
  <option value="2">East</option>
  <option value="3">North</option>
  <option value="4">South</option>
  </select>

  <select id="selection" name="selection">
  <option value="1">Winter</option>
  <option value="2">Spring</option>
  <option value="3">Summer</option>
 <option value="4">Fall</option>

 </select>
 <button class="go-btn" type="submit">Go</button>
 </div>

标签： javascriptjqueryhtml

解决方案

首先，让我们为选择标签设置唯一的 ID，并将值设置为实际的字符串（我们可以将它们保持为数字并稍后在它们上执行开关以确定它们的值，但这样更容易）：

<select id="direction" name="selection">
    <option value="west">West</option>
    <option value="east">East</option>
    <option value="north">North</option>
    <option value="south">South</option>
</select>

<select id="season" name="selection">
    <option value="winter">Winter</option>
    <option value="spring">Spring</option>
    <option value="summer">Summer</option>
    <option value="fall">Fall</option>
</select>

接下来，让我们编写一个函数来使用这些选择标签中的值组成一个链接。我在document.querySelector这里使用过，但如果您愿意，您可以轻松地将其更改为 jQuery：

function getLink() {
    var direction = document.querySelector("#direction").value;
    var season = document.querySelector("#season").value;
    //Assuming that the html files are in the same folder as the current page
    return "./" + direction + season + ".html";
}

最后，让我们更新我们的按钮以在点击时将页面位置更改为新链接：

<button class="go-btn" type="submit" onClick="window.location.href = getLink()">Go</button>

这是所有的一切：

<!DOCTYPE html>
<html lang="en">
<body>
    <div class="selCont">
        <h2>pick an option</h2>
            
        <select id="direction" name="selection">
            <option value="west">West</option>
            <option value="east">East</option>
            <option value="north">North</option>
            <option value="south">South</option>
        </select>

        <select id="season" name="selection">
            <option value="winter">Winter</option>
            <option value="spring">Spring</option>
            <option value="summer">Summer</option>
            <option value="fall">Fall</option>
        </select>

        <button class="go-btn" type="submit" onClick="window.location.href = getLink()" >Go</button>
    </div>
</body>
<script>
    function getLink() {
        var direction = document.querySelector("#direction").value;
        var season = document.querySelector("#season").value;
        return "./" + direction + season + ".html";
    }
</script>
</html>

推荐阅读