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

Question

下面的代码让我点击两次以导航到我需要的页面。但问题是我只想 select 该选项一次，一旦我 selection 我想导航到我需要的页面。我看到没有选项是 selected。我必须按回车键或再次单击该选项。

On change 没有给我一个键码，我需要稍后使用，如果用户是盲人并且不能使用鼠标，he/she 只能使用 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

为什么不在更改事件

上使用 select

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

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

我认为 keypress 活动在这里可能有效。

一旦用户选择了一个选项，用户可以按 enter 键，然后我们导航到所选的 page/url

有点像这样

$(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>

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

Why do I have to click twice on selected option?

javascript

jquery

jquery-events