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

【问题标题】：Programmatically select Nth option select以编程方式选择第 N 个选项选择
【发布时间】：2019-01-21 11:06:43
【问题描述】：

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

我想制作另一个脚本来模拟在该框中选择第 N 个项目的行为。我已经阅读并无法弄清楚如何做到这一点。我确信有一个简单的选择。

【问题讨论】：

标签： javascript jquery html select drop-down-menu

【解决方案1】：

使用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>

【讨论】：

我无法让它工作。假设 select 元素的 div Id 为“myDiv”，用这种方法选择第二个选项会怎么样？我试过了： ('#myDiv option').prop('selectedIndex', 1).change();
省略option。您想在 select 元素上设置属性：$('#myDiv').prop('selectedIndex', 1).change();
非常感谢。我最终选择了另一个答案，因为这对我来说更容易开始工作。但两者似乎都完全正确。非常感谢您的帮助！

【解决方案2】：

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

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

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

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

【讨论】：

刚刚测试过，这正是您所说的。但是，它不会从选择框中触发“onchange”事件。有什么办法可以做到这一点？否则我可以找到另一个简单的解决方法。
我为你更新了我的答案。当您以编程方式选择 option 时，不会引发任何事件。如果您需要该事件，则需要使用trigger() 手动触发它。

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果您已经将选择元素作为对象或在循环中。

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

它对我有用。

在 Chrome 和 IE 上测试。

【讨论】：

【解决方案5】：

$('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>

【讨论】：