如何在我的选择下拉列表中每隔2秒按数字选项项进行多次自动更改
[英]How to make multiple auto on change by number option item in my select drop-down every 2 seconds
问题描述
I have a select drop-down has 4 option items. 
我有一个选择下拉列表有4个选项。
- I want to make an auto on change to all of my select items one after one after every 2 second. 我想在每2秒后一个接一个地对所有选择项进行自动更改。
- 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. 我尝试循环4次并根据选项的数量进行自动更改但不起作用。
- So how can I do these 4 on-change automatically? 那么如何自动完成这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>
2 个解决方案
解决方案1
0 2019-06-06 22:20:04
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. 我将您在set timeout函数上的内容放入一个不同的命名函数中，该函数将select选项的索引作为参数。
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. 最后，它将创建一个超时并在两秒后调用相同的函数，增加的i模数值4使它可以循环。
解决方案2
0 2019-06-07 04:34:51
You can use setTimeout loop with recursion and trigger like below. 您可以将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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.