How to make multiple auto on change by number option item in my select drop-down every 2 seconds

Question

I have a select drop-down has 4 option items.

I want to make an auto on change to all of my select items one after one after every 2 second.
I try to loop for 4 times and make an auto on-change according to the number of the option item but doesn't work.
So how can I do these 4 on-change automatically?

<!DOCTYPE HTML>
<html>
   <head>
     <meta charset="UTF-8">
   </head>
   <body>
     <select class="cars">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
     </select>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script>
     $ (document).ready (function() {
     var i;
     for (i = 0; i < 4; i++) {
     setTimeout (function() {
     $ (".cars").prop ('selectedIndex', i); // make on change according to its number item
     }, 2000);
     }
     });
     </script>
   </body>
</html>

Related: [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Taplar, Jun 06 '19 at 22:28

pauldrodriguez · Answer 1 · 2019-06-06T22:33:46.107

maybe this will help

function autoAjax(i) {
    $(".cars").prop("selectedIndex",i);


    setTimeout(function() {autoAjax((i+1)%4);},2000);

}

autoAjax(0);

i put the contents you had on the set timeout function into a different named function that takes the index of the select option as a parameter.

at the end, it will create a timeout and call the same function after two seconds, with an incremented value of i modulus 4 so that it can loop around.

4b0 · Answer 2 · 2019-06-08T12:56:08.850

You can use setTimeout loop with recursion and trigger like below.

let i = 0;
function fntimeout() {
  setTimeout(function() {
    if (i == 4) // Reset Counter if you want infinite change
      i = 0;
    $(".cars").trigger('change');
    $(".cars").prop('selectedIndex', i);
    fntimeout();
    i++;
  }, 2000);
}
fntimeout();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

How to make multiple auto on change by number option item in my select drop-down every 2 seconds

2 Answers2