javascript - 如何重定向到选择相同选项的不同页面？

Question

好的。因此，我的页面页脚中有一个简单的下拉菜单，我需要在其中选择一个选项，重定向到我的联系页面，并在我的联系表单中选择相同的选项。

https://nexia.com 有一个示例，但我想要一个比现有解决方案更干净的解决方案。我还需要能够在 javascript 中执行此操作，只需选择选项而不修改 url。

到目前为止，我所能做的就是将表单在提交时重定向到正确的页面。剩下的唯一步骤是返回与提交时相同的选定值。

这是 HTML:

<form id="selectForm">
  <div class="select-wrap">
     <div class="select-container">
       <select>
        <option selected="true" disabled="disabled">How can we help?</option>
        <option value="enquiry">General Enquiry</option>
        <option value="audit">Audit</option>
        <option value="tax">Tax</option>
        <option value="advisory">Advisory</option>
       </select>
      </div>
     </div>
    <input class="btn btn--dark" id="submit" type="submit" value="Ask Us">
</form>

这是我的 JS:

<script type="text/javascript">

          var select = document.getElementById('selectForm')

          window.onload=function() {
          select.onsubmit=function() {
            window.location.replace("/contact");
            return false;
          }
        }

</script>

下一步需要帮助。

为了进一步说明，如果在页脚表单中选择“审核”选项，则在提交时我希望用户重定向到“/contact”，并且联系表单的选定选项也为“审核”。

Answer 1

<script type="text/javascript">
    var select = document.getElementById('selectForm')
    window.onload = function () {
        if (getCookie("selection")) {
            document.getElementById("help_option").value = getCookie("selection");
        } else {
            document.getElementById("help_option").value = "default";
        }
        select.onsubmit = function () {
            document.cookie = "selection=" + (document.getElementById("help_option").value);
            return false;
        }
    }
    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
</script>

<form id="selectForm">
    <div class="select-wrap">
        <div class="select-container">
            <select id="help_option">
                <option value="default" selected="true" disabled="disabled">How can we help?</option>
                <option value="enquiry">General Enquiry</option>
                <option value="audit">Audit</option>
                <option value="tax">Tax</option>
                <option value="advisory">Advisory</option>
            </select>
        </div>
    </div>
    <input class="btn btn--dark" id="submit" type="submit" value="Ask Us">
</form>

当您提交表单时，您会将所选值存储到 cookie 中。之后，您将重定向到您的联系页面。在 window.onload 上，您可以读取设置的 cookie 的值，然后将其设置为您在联系页面中选择的值。我添加了 w3schools 的标准 getCookie 方法，以便更轻松地读取 cookie。 w3school js-cookies