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

Monica 发表于 Dev

莫妮卡

以下代码使我单击两次以导航至所需页面。但是问题在于，我只希望选择一次该选项，并且一旦我做出选择，我就想导航到所需的页面。我看到没有选择任何选项。我必须按Enter或再次单击该选项。

更改时没有给我键码，以后我需要使用，如果用户是盲人并且无法使用鼠标，则他/她只需使用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>

模糊

我认为该keypress活动可能在这里起作用。

一旦用户选择了一个选项，用户就可以按该enter键，然后我们导航到所选页面/ 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。