I have a select element on my Site and am firing an event in JS/jQuery when that changes like so:

$("select#quantity").on("change", function(){
    //do stuff
})

However, you either need to click out of the select box again or wait a split second after the change has been made for this event to happen.

Is there a way to trigger this sooner? Like as soon as they choose an option without clicking back out of the select box.

I have a select element on my Site and am firing an event in JS/jQuery when that changes like so:

$("select#quantity").on("change", function(){
    //do stuff
})

However, you either need to click out of the select box again or wait a split second after the change has been made for this event to happen.

Is there a way to trigger this sooner? Like as soon as they choose an option without clicking back out of the select box.

• javascript
• jquery

Share Improve this question Follow edited Mar 21, 2020 at 15:19 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jul 24, 2018 at 14:22 Paddy HallihanPaddy Hallihan 1,70655 gold badges3434 silver badges9090 bronze badges 4

• 3 The change event fires as soon as you click on another option, or navigate to another option using your keyboard. You don't need to click anywhere else to fire it. – 31piy Commented Jul 24, 2018 at 14:23
• The above is true. It sounds like your issue is due to flawed logic, or a performance problem somewhere. In which case we'd need to see a much more plete sample of your JS and HTML in order to help you debug it. – Rory McCrossan Commented Jul 24, 2018 at 14:24
• Try using the input event. I know it works on text fields, but I've never tried it on a select. – Taplar Commented Jul 24, 2018 at 14:27
• the issue is that the function is submitting a form to update the quantity of products and if a user on my site hits continue on that page before the form submits it just goes through as the original quantity not what they updated. I changed it to a mouseleave function and it seems to be working better – Paddy Hallihan Commented Jul 24, 2018 at 14:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Yeah, so you can use the input event which happens as soon as the value of the input changes.

$('#quantity').on('input', function (e) {
  console.log(this.value);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="quantity">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>