javascript - Why do I have to click twice on selected option? - Stack Overflow

admin管理员组

文章数量:1386672

The following code makes me click twice to navigate to the page I need. But the problem is that I only want to select the option once, and as soon as I make my selection I want to navigate to the page I need. I see that no option is selected. I have to either press enter or click again on the option.

On change doesn't give me a keycode, that I need to use later on, if the user is blind and cannot use the mouse, he/she has to navigate only using the tab key. Onchange will trigger an immediate event, without letting the user chose and option. That is the reason why I cannot use OnChange since it's not consistent for visually impaired users on 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=".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">Bla Bla 1</option>
  <option tabindex="0" value="www.yahoo">Bla Bla 2</option>
  <option tabindex="0" value="www.bing">Bla Bla 3</option>
</select>

The following code makes me click twice to navigate to the page I need. But the problem is that I only want to select the option once, and as soon as I make my selection I want to navigate to the page I need. I see that no option is selected. I have to either press enter or click again on the option.

On change doesn't give me a keycode, that I need to use later on, if the user is blind and cannot use the mouse, he/she has to navigate only using the tab key. Onchange will trigger an immediate event, without letting the user chose and option. That is the reason why I cannot use OnChange since it's not consistent for visually impaired users on 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./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.">Bla Bla 1</option>
  <option tabindex="0" value="www.yahoo.">Bla Bla 2</option>
  <option tabindex="0" value="www.bing.">Bla Bla 3</option>
</select>

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Mar 5, 2018 at 19:56 Monica asked Mar 5, 2018 at 19:28 MonicaMonica 1,53444 gold badges2828 silver badges4646 bronze badges 4

• 2 use change not click – Mohammed Elhag Commented Mar 5, 2018 at 19:34
• Does using keypress work then? - I mean, the user makes a selection from the select menu and then how do we know the selection is the final? the user presses the enter key and we navigate away to the selected page/url? – blurfus Commented Mar 5, 2018 at 20:06
• @ochi aria labels are used with a screenreader to let know the user it's options and selections. But I cannot make it to work for a regular user. If you see my example. Isn't it weird that you have to click again on the option that was once previously selected? – Monica Commented Mar 5, 2018 at 20:11
• I think I understand that part, I just do not understand how to determine that an option selected in the select box is the final one. What would be the process like? – blurfus Commented Mar 5, 2018 at 20:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You need to use change instead of the click event.

  $(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./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.">Bla Bla 1</option>
  <option tabindex="0" value="www.yahoo.">Bla Bla 2</option>
  <option tabindex="0" value="www.bing.">Bla Bla 3</option>
</select>

I think the keypress event might work here.

Once the user has selected an option, the user can press the enter key and we navigate away to the selected page/url

Kind of like this

$(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./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.">google</option>
  <option tabindex="0" value="www.yahoo.">yahoo</option>
  <option tabindex="0" value="www.bing.">bing</option>
</select>

Why not use select on change event

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

本文标签： javascriptWhy do I have to click twice on selected optionStack Overflow