如何在我的選擇下拉列表中每隔2秒按數字選項項進行多次自動更改

Question

我有一個選擇下拉列表有4個選項。

我想在每2秒后一個接一個地對所有選擇項進行自動更改。
我嘗試循環4次並根據選項的數量進行自動更改但不起作用。
那么如何自動完成這4次變更？

<!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>

Answer 1

也許這會有所幫助

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


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

}

autoAjax(0);

我將您在set timeout函數上的內容放入一個不同的命名函數中，該函數將select選項的索引作為參數。

最后，它將創建一個超時並在兩秒后調用相同的函數，增加的i模數值4使它可以循環。

Answer 2

您可以將setTimeout循環與遞歸和trigger一起使用，如下所示。

 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>

如何在我的選擇下拉列表中每隔2秒按數字選項項進行多次自動更改

問題描述

2 個解決方案

解決方案1
0 2019-06-06 22:20:04

解決方案2
0 2019-06-07 04:34:51

如何在我的選擇下拉列表中每隔2秒按數字選項項進行多次自動更改

問題描述

2 個解決方案

解決方案1 0 2019-06-06 22:20:04

解決方案2 0 2019-06-07 04:34:51

解決方案1
0 2019-06-06 22:20:04

解決方案2
0 2019-06-07 04:34:51