用户单击输入时执行值 URL 页面更改？答案

【问题标题】：Execute Value URL page change when user clicks input?用户单击输入时执行值 URL 页面更改？
【发布时间】：2020-12-01 10:39:33
【问题描述】：

我有一个带有不同选项的动态表单，每个选项中都有一个包含 URL 的值。一旦用户选择选项然后单击输入按钮，他们是否有可能被重定向到值中的 URL？这是我当前的代码。

$(function() {
  $("#submit").click(function() {
    location.href = $("#decision-form select").val();
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="decision-form" action="" method="post">
  <div class="col-lg-10 col-md-10 col-sm-12 col-12">
    <select name="age_select" id="age_select" class="age">
      <option value="age-fill">Select Your Age</option>
      <option value="https://stackoverflow.com/">8</option>
      <option value="DIFFERENT-URL">9</option>
      <option value="DIFFERENT-URL">10</option>
      <option value="DIFFERENT-URL">11</option>
    </select>
  </div>

  <div class="col-lg-2 col-md-2 col-sm-12 col-12">
    <input type="submit" value="Find Out More" id="submit" />
  </div>
</form>

【问题讨论】：

是的。请向我们展示您的 JavaScript 尝试。
是的，防止提交表单的默认行为，然后将 window.location.href 与所选选项一起使用。如果您展示了您尝试过的内容，我会调整您的代码
对不起 - 我错过了 jQuery。我现在已经添加了，但肯定认为我做错了。
尝试$("#submit").click并使用$("#decision-form select").val();获取价值
谢谢@freedomn-m 我已经做到了，但这似乎不起作用 - 我做错了什么吗？

标签： javascript jquery forms

【解决方案1】：

问题是您获得了所选选项的值，但没有对它做任何事情。

$("#decision-form select").val();

这并没有将它分配给任何东西。您需要将其提供给 location.href 以更改 URL。

location.href = $("#decision-form select").val();

【讨论】：

谢谢，我已经修改了上面的代码，但仍然无法正常工作 - 我的格式有问题吗？
不，看起来是正确的（虽然你应该听表单的提交事件，而不是按钮的点击事件，但这不是你的问题。）你能在小提琴中重现吗？

【解决方案2】：

首先，您不需要该表单，因为您不会提交它让我们做你想做的事 - 点击时重定向，我们将使用一个链接，其 href 值由 JS 更改，只要你选择的值发生更改

$(function() {
  $("#age_select").change((event) =>
    $("#submit").attr("href", event.target.value)
  )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-10 col-md-10 col-sm-12 col-12">
  <select name="age_select" id="age_select" class="age">
    <option value="age-fill">Select Your Age</option>
    <option value="https://stackoverflow.com/">8</option>
    <option value="DIFFERENT-URL">9</option>
    <option value="DIFFERENT-URL">10</option>
    <option value="DIFFERENT-URL">11</option>
  </select>
</div>

<div class="col-lg-2 col-md-2 col-sm-12 col-12">
  <a id="submit" href="age-fill">Find out More</a>
</div>

如果您仍然想要一个表单和一个提交按钮，让我们将表单的操作更改为您要重定向的 URL。使用 GET 方法进行重定向。从您的选择中删除名称属性以将其从参数中排除。更改时绑定事件，如前面的示例所示。

$(function() {
   $("#age_select").change((event) =>
    $("#decision-form").attr("action", event.target.value)
  )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="decision-form" action="" method="get">
  <div class="col-lg-10 col-md-10 col-sm-12 col-12">
    <select id="age_select" class="age">
      <option value="age-fill">Select Your Age</option>
      <option value="https://stackoverflow.com/">8</option>
      <option value="DIFFERENT-URL">9</option>
      <option value="DIFFERENT-URL">10</option>
      <option value="DIFFERENT-URL">11</option>
    </select>
  </div>

  <div class="col-lg-2 col-md-2 col-sm-12 col-12">
    <input type="submit" value="Find Out More" id="submit" />
  </div>
</form>

【讨论】：