代码之家 › 专栏 › 技术社区 › Mona Coder

无法动态单击选择选项

jquery javascript

Mona Coder · 技术社区 · 6 年前

为什么我不能动态地点击每一个 #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>

2 回复 | 直到 6 年前

Ronnie Smith 6 年前

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

Mohamed-Yousef 6 年前

如果我明白你的意思,你可以用这种方法来改变select的值。。使用 .each() 循环浏览选项,然后使用 setTimeout() 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);
});

<脚本src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script>
<option value=“沃尔沃”>沃尔沃</option>
<option value=“萨博”>萨博</option>
<option value=“梅赛德斯”>梅赛德斯</option>
<option value=“奥迪”>奥迪</option>
</select>