为什么我必须在所选选项上单击两次？

Question

以下代码让我单击两次以导航到我需要的页面。但问题是我只想选择一次选项，一旦我做出选择，我就想导航到我需要的页面。我看到没有选择任何选项。我必须按回车或再次单击该选项。

在改变时没有给我一个键码，我需要稍后使用，如果用户是盲人并且不能使用鼠标，他/她必须仅使用tab键导航。 Onchange将触发即时事件，而不会让用户选择和选择。这就是为什么我不能使用OnChange的原因，因为它对IE11上的视障用户来说并不一致

  $(document).on("click", '.js-jump-to-page', function(e) {
      var url = $(this).val();
      var target = '_blank';
      if (url) {
        alert(url);
        window.open(url, target);
      }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-rates-jump-to-page-1" class="select js-jump-to-page">       
  <option tabindex="0" value="">Select a product</option>
  <option tabindex="0" value="www.google.com">Bla Bla 1</option>
  <option tabindex="0" value="www.yahoo.com">Bla Bla 2</option>
  <option tabindex="0" value="www.bing.com">Bla Bla 3</option>
</select>

Answer 1

我认为keypress事件可能会在这里发挥作用。

一旦用户选择了一个选项，用户就可以按下回车键并导航到所选页面/网址

有点像这样

$(function() {
  $(document).on("keypress", '.js-jump-to-page', function(e) {
    // check if the keypress is 'Enter'
    if (e.which === 13) {
      // get value of selected
      var selectedUrl = $(".js-jump-to-page").val();

      if (selectedUrl) {
        // now go to that page
        var target = '_blank';

        //close dropdown (not sure this works like this)
        $(".js-jump-to-page").blur();

        console.log('Going to: ' + selectedUrl);
        window.open(selectedUrl, target);
      }
    }
  });

  $(document).on("click", '.js-jump-to-page', function(e) {
    var url = $(this).val();
    e.preventDefault();
    console.log('selected: ' + url);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-rates-jump-to-page-1" class="select js-jump-to-page">       
  <option tabindex="0" value="">Select a product</option>
  <option tabindex="0" value="www.google.com">google</option>
  <option tabindex="0" value="www.yahoo.com">yahoo</option>
  <option tabindex="0" value="www.bing.com">bing</option>
</select>

Answer 2

您需要使用change而不是click事件。

  $(document).on("change", '.js-jump-to-page', function(e) {
      var url = $(this).val();
      var target = '_blank';
      if (url) {
        alert(url);
        window.open(url, target);
      }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-rates-jump-to-page-1" class="select js-jump-to-page">       
  <option tabindex="0" value="">Select a product</option>
  <option tabindex="0" value="www.google.com">Bla Bla 1</option>
  <option tabindex="0" value="www.yahoo.com">Bla Bla 2</option>
  <option tabindex="0" value="www.bing.com">Bla Bla 3</option>
</select>

Answer 3

为什么不使用select on change事件

$( ".select" ).on('change', function() {
  var url = $(this).val();
  var target = '_blank';
  if (url) {
    alert(url);
    window.open(url, target);
  }
});