以编程方式选择第N个选项选择

Programmatically select Nth option select

本文关键字：选择 选项 方式 编程      更新时间：2023-09-26

我有一个填充选择框的脚本。这意味着我不知道该框中的值或数字项。

我想制作另一个脚本，模拟在该框中选择第N个项目的行为。我读了很多遍，不知道该怎么做。我相信有一个简单的选择。

使用selectedIndex属性：

$('select').prop('selectedIndex',  3);

您可以链接change()方法来触发任何change()事件：

代码段：

$('select').change(function() {
  console.log('changed');
});
$('select').prop('selectedIndex',  3).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>Not me</option>
  <option>Not me</option>
  <option>Not me</option>
  <option>Select me!</option>
  <option>Not me</option>
</select>

您可以使用eq()方法来选择匹配集中的第N个项目。从那里你可以将option的selected属性设置为true来选择它。试试这个：

$('#mySelect option').eq(2).prop('selected', true).trigger('change');

请注意，给eq()的索引是基于零的，因此上面将选择第三个option元素。

还要注意，当您以编程方式选择option时，不会引发任何事件。如果需要该事件，则需要使用trigger()手动激发它。

$('#mySelect').change(function(){
   var selectedOption = $(this).prop('selected', true)
})

如果您已经将select元素作为对象或循环。

$('select').each(function() {
   if( /*Some Filter*/ ){
      $(this).val($(this).find('option').eq(2).val()).trigger('change');
   }
});

它对我有效。

在Chrome和IE上测试。

$('select').change(function() {
  console.log('changed');
});
$('select').prop('selectedIndex',  3).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>Not me</option>
  <option>Not me</option>
  <option>Not me</option>
  <option>Select me!</option>
  <option>Not me</option>
</select>

相关文章：