如何通过代码点击非Select标签的Select2下拉菜单选项？

我需要通过代码点击某网站的下拉菜单选项，对应的HTML结构如下：

<ul class="select2-results" role="listbox" id="select2-results-8">
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted" role="presentation"><div class="select2-result-label" id="select2-result-label-269" role="option">
<span class="select2-match">Good</span></div></li>
<li class="select2-results-dept-0 select2-result select2-result-selectable" role="presentation">
<div class="select2-result-label" id="select2-result-label-270" role="option">Very 
<span class="select2-match">Good</span></div></li></ul>

目前我已经能通过以下代码打开下拉菜单，但无法触发选项的点击操作：

const input = document.querySelector("#s2id_autogen8")
input.value = 'Good'

const event = new Event('input', {
  bubbles: true,
  cancelable: true,
})

input.dispatchEvent(event)

我尝试过调用click()、触发keydown/keyup事件，但都返回undefined；因为这个下拉菜单用的是input标签而非原生select，selectedIndex属性也无法生效，希望得到可行的解决方法。

可行解决方法 #

从HTML结构可以判断这是Select2组件（一款常用的自定义下拉插件），针对这类组件有两种可靠的处理方式：

方法1：直接调用Select2的API（推荐） #

Select2本身提供了设置选中项的API，不需要模拟点击，这是最稳定的方式：

// 找到Select2的容器（通过input元素向上查找）
const select2Container = document.querySelector('#s2id_autogen8').closest('.select2-container');
// 找到被隐藏的原生select元素（Select2基于原生select改造）
const originalSelect = select2Container.querySelector('select');

// 设置选中值（替换为目标选项的value属性值）
$(originalSelect).select2('val', '目标选项的value值');
// 触发组件的change事件，确保页面其他逻辑同步更新
$(originalSelect).trigger('change');

提示：如果不知道选项的value值，可以打开页面检查工具，找到被隐藏的原生select标签，查看其内部option的value属性。

方法2：模拟真实用户交互流程 #

如果无法使用Select2 API，可以模拟完整的鼠标操作（Select2通常监听mousedown事件而非单纯的click）：

// 确保下拉菜单已展开（你已实现此步骤）
const input = document.querySelector("#s2id_autogen8")
input.value = 'Good'
input.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }))

// 找到目标选项的标签元素（比如第一个"Good"选项）
const targetOption = document.querySelector('#select2-result-label-269');

// 先触发mousedown事件（Select2处理选中的核心事件）
const mousedownEvent = new MouseEvent('mousedown', {
  bubbles: true,
  cancelable: true,
  view: window
});
targetOption.dispatchEvent(mousedownEvent);

// 再触发click事件完成选中流程
const clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
});
targetOption.dispatchEvent(clickEvent);

为什么之前的click()无效？因为Select2内部逻辑绑定的是mousedown事件，单纯调用click()无法触发组件的选中处理逻辑。

补充检查 #

• 确认页面已加载jQuery：在浏览器控制台输入typeof $，返回function则说明已加载（Select2通常依赖jQuery）。
• 如果找不到原生select元素，也可以通过Select2实例操作：比如$('.select2-container').select2('open')直接打开下拉，$('.select2-container').select2('val', 'xxx')设置选中值。

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