Блог

Я хочу иметь список опций, содержащих разные 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>
 

Как я могу реализовать кнопку отправки в этом коде, чтобы пользователь не перенаправлялся сразу?

Добавьте кнопку отправки и поместите свой код при ее нажатии (примечание: перед перенаправлением вы должны проверить, выбран ли 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>
 

Для этого, просто добавив submit кнопку (через ввод), вы можете просто обработать submit щелчок, а затем получить значение select элемента. Таким образом, он будет срабатывать только при submit нажатии, а не при каждом изменении select

 <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="send_url" value="Submit" />

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