jquery select change event happen and keyboard navigation

Question

this issue was related to jquery select option click handler 9 years old question.

I have a dropdow, this dropdown can be really big. I want to autosubmit the form when dropdown are updated.

• If i use on("click") event : it work good with Firefox, but didn't work with Chromium.
• If i use on("change") event : it work on both (and surely other) but : unable to go to the last element, the change event happen when option is selected by keyboard
• If i use on("blur") event : it work when change, but without select update too …

$(document).ready(function(){
     $("#onchange").change(function(){
     /* this happen at bb, no way to set FF */
        $("#form").submit();
   });
     $("#onblur").blur(function(){
        /* happen without update */
        $("#form").submit();
   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<label for="onchange">onchange</label>
<select name="onchange" id="onchange">
<option value="aa" selected="selected">AA</option>
<option value="bb">BB</option>
<option value="cc">CC</option>
<option value="dd">DD</option>
<option value="ee">EE</option>
<option value="ff">FF</option>
</select>
<hr>
<label for="onblur">onblur</label>
<select name="onblur" id="onblur">
<option value="aa" selected="selected">AA</option>
<option value="bb">BB</option>
<option value="cc">CC</option>
<option value="dd">DD</option>
<option value="ee">EE</option>
<option value="ff">FF</option>
</select>
<hr>
<input type="submit" value="submit">
</form>

Did someone have a good solution to disable select change event with keyboard navigation ?

Thank you

Screencast :

• Firefox 84.0.2 (64 bits) / Linux
• Chromium Version 87.0.4280.88 / Linux (64 bits)

Answer 1

Here is a suggestion for a "fix" for that uncool behavior...

On Tab key up, if the select is focussed, save the value. Submit the form only if the value has changed between the focus and the blur event.

$(document).ready(function() {
  let selectVal
  
  $(document).on("keyup", function(e){
    if(e.key==="Tab" && $("#onblur").is(":focus")){
      selectVal = $("#onblur").val()
      console.log("val setted")
    }
  })

  $("#onblur").blur(function() {
    if (selectVal !== $(this).val()) {
      $("#form").submit();
    }else{
      console.log("Value was not changed")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">

  <label for="onblur">onblur</label>
  <select name="onblur" id="onblur">
    <option value="aa" selected="selected">AA</option>
    <option value="bb">BB</option>
    <option value="cc">CC</option>
    <option value="dd">DD</option>
    <option value="ee">EE</option>
    <option value="ff">FF</option>
  </select>
  <hr>
  <input type="submit" value="submit">
</form>

For many selects... Here is the variant using the .onblur class.

$(document).ready(function() {

  let selects = $(".onblur")
  let selectVal
  
  $(document).on("keyup", function(e){
    if(e.key==="Tab" && selects.is(":focus")){
      selectVal = $(".onblur:focus").val()
      console.log("val setted")
    }
  })

  selects.blur(function() {
    if (selectVal !== $(this).val()) {
      $("#form").submit();
    }else{
      console.log("Value was not changed")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  
  <label for="onblur1">onblur1</label>
  <select name="onblur1" id="onblur1" class="onblur">
    <option value="aa" selected="selected">AA</option>
    <option value="bb">BB</option>
    <option value="cc">CC</option>
    <option value="dd">DD</option>
    <option value="ee">EE</option>
    <option value="ff">FF</option>
  </select>
  <hr>
  <label for="onblur2">onblur2</label>
  <select name="onblur2" id="onblur2" class="onblur">
    <option value="aa" selected="selected">EE</option>
    <option value="bb">FF</option>
    <option value="cc">GG</option>
    <option value="dd">HH</option>
    <option value="ee">II</option>
    <option value="ff">JJ</option>
  </select>
  <hr>
  <label for="onblur3">onblur3</label>
  <select name="onblur3" id="onblur3" class="onblur">
    <option value="aa" selected="selected">KK</option>
    <option value="bb">LL</option>
    <option value="cc">MM</option>
    <option value="dd">NN</option>
    <option value="ee">OO</option>
    <option value="ff">PP</option>
  </select>
  <hr>
  <input type="submit" value="submit">
</form>

Using a data atribute, as you suggested in comments, may be even better! ;)

$(document).ready(function() {

  let selects = $(".onblur")
  
  // Set a data attribute for each select
  selects.each(function(){
    $(this).data("selected", $(this).val())
  })
  
  // On blur, compare the value with the data attribute
  selects.blur(function() {
    if ($(this).data("selected") !== $(this).val()) {
      $("#form").submit();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  
  <label for="onblur1">onblur1</label>
  <select name="onblur1" id="onblur1" class="onblur">
    <option value="aa" selected="selected">AA</option>
    <option value="bb">BB</option>
    <option value="cc">CC</option>
    <option value="dd">DD</option>
    <option value="ee">EE</option>
    <option value="ff">FF</option>
  </select>
  <hr>
  <label for="onblur2">onblur2</label>
  <select name="onblur2" id="onblur2" class="onblur">
    <option value="aa" selected="selected">EE</option>
    <option value="bb">FF</option>
    <option value="cc">GG</option>
    <option value="dd">HH</option>
    <option value="ee">II</option>
    <option value="ff">JJ</option>
  </select>
  <hr>
  <label for="onblur3">onblur3</label>
  <select name="onblur3" id="onblur3" class="onblur">
    <option value="aa" selected="selected">KK</option>
    <option value="bb">LL</option>
    <option value="cc">MM</option>
    <option value="dd">NN</option>
    <option value="ee">OO</option>
    <option value="ff">PP</option>
  </select>
  <hr>
  <input type="submit" value="submit">
</form>