时间戳

首页 > 解决方案 > 仅在单击提交时根据用户的 SELECT OPTION 将用户发送到 URL

javascript - 仅在单击提交时根据用户的 SELECT OPTION 将用户发送到 URL

问题描述

我想要一个包含不同 URL 的选项列表，然后在用户单击提交后根据他选择的选项重定向用户。

这行得通 - 但它的工作速度很快，因为用户不需要点击任何提交。

<select id="dynamic_select">
  <option value="" selected>Pick a Website</option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.youtube.com">YouTube</option>
  <option value="https://www.netflix.com">Netflix</option>
</select>

<script>
    $(function(){
      // bind change event to select
      $('#dynamic_select').on('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
    });
</script>

如何实现此代码的提交按钮，以便用户不会立即被重定向？

标签： javascriptjquery

解决方案

添加一个提交按钮并将您的代码放在它的点击上（注意：在重定向之前，您应该检查是否选择了 url）：

<select id="dynamic_select">
<option value="" selected>Pick a Website</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.youtube.com">YouTube</option>
<option value="https://www.netflix.com">Netflix</option>
</select>
<input type="submit" id="submit" value="submit" />

<script>
$(function(){
  // bind change event to select
  $('#submit').on('click', function () {
      var url = $('#dynamic_select').val(); // get selected value
      if (url!="") { // require a URL
          window.location = url; // redirect
      }
      else
         alert('Please select a Website!');
      return false;
  });
});
</script>

推荐阅读