Question

为什么我不能动态点击每个#cars选项？

let carscount = $('#cars > option').length;
 console.log(carscount);
var x = carscount;
var interval = 1000;

for (var i = 0; i < x; i++) {
    let counter = 1;
    setTimeout(function () {
        $('#cars').click();
        $('#cars > option:eq('+counter+')').click();
        counter++;
    }, i * interval)
}

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

Answer 1

以编程方式单击UI控件不是最佳做法，因为跨浏览器/跨设备的支持会有所不同。如果要以编程方式预先选择一个选项，只需执行myList.value = "audi"

Answer 2

如果我明白你的意思，你可以使用这种方法来更改选择的值..使用.each()来遍历选项，然后在setTimeout()中使用.each()并获得选择您可以为选择添加change事件的值

var interval = 1000;

$('#cars > option').each(function(i){
  var ThisVal = $(this).val();
  setTimeout(function () {
      $('#cars').val(ThisVal).change();
  }, i * interval)
});

$('#cars').on('change' , function(){
  console.log(this.value);
});

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

对于您的代码，您需要进行一些更改以使其正常工作

let carscount = $('#cars > option').length - 1;
 console.log(carscount);
var x = carscount;
var interval = 1000;
let counter = 0;
for (var i = 0; i < x; i++) {
    setTimeout(function () {
        $('#cars').val($('#cars > option:eq('+counter+')').val()).change();
        counter++;
    }, i * interval)
}

$('#cars').on('change' , function(){
  console.log(this.value);
});

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

注意：因为:eq()的索引从0开始，而.length的索引从1开始 ..您需要- 1 .length

无法动态点击选择选项

2 个答案: