如何模拟点击下拉列表选项？选中第3项或value为ASD的选项

针对选中下拉列表第3个选项或value为"ASD"的选项的需求，结合你使用的Select2插件，以下是修正后的实现代码：

原生JavaScript实现 #

选中第3个选项（对应value="ACE"） #

const select = document.getElementById('edit-activity-domain');
// 选项索引从0开始，第3个选项索引为2
select.selectedIndex = 2;
// 触发change事件同步Select2 UI
select.dispatchEvent(new Event('change'));

选中value="ASD"的选项 #

const select = document.getElementById('edit-activity-domain');
select.value = 'ASD';
select.dispatchEvent(new Event('change'));

jQuery实现 #

选中第3个选项（对应value="ACE"） #

// 修复语法错误，同时触发Select2专用事件
$('#edit-activity-domain')
  .val($('#edit-activity-domain option:nth-child(3)').val())
  .trigger('change.select2');

选中value="ASD"的选项 #

// 直接设置value并同步Select2
$('#edit-activity-domain').val('ASD').trigger('change.select2');

原代码问题说明 #

1. 原生JS代码：直接调用option的click()方法对Select2渲染的下拉无效，且nth-child(4)指向的是第4个选项（即ASD），不符合选第3个选项的需求。
2. jQuery代码：find('option:nth-child(3')存在语法错误（缺少闭合括号），且仅设置option的selected属性无法同步Select2的UI，需要触发change.select2事件。

内容的提问来源于stack exchange，提问作者ibibi