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

无法动态单击选择选项

jquery javascript

Mona Coder · 技术社区 · 7 年前

为什么我不能动态地点击每一个 #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 回复 | 直到 7 年前

Ronnie Smith 7 年前

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

Mohamed-Yousef 7 年前

如果我明白你的意思,你可以用这种方法来改变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>

注:因为 :eq() 索引从0开始,然后 .length .. 你需要 - 1 这个

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前