如何模拟下拉选项选中？click()方法无效的解决办法

直接调用<option>元素的click()方法无法触发下拉框的选中状态变更及change事件，这是因为浏览器对<select>元素的事件处理逻辑限制——选中操作需要通过控制<select>本身的属性来完成，而非直接点击子选项。

正确实现方式 #

有两种常用方案可以实现模拟选中并触发change事件：

方案1：直接设置<select>的value属性（推荐，已知目标选项value时使用）

通过将<select>的value设置为目标选项的value值，即可直接选中对应选项，之后手动触发change事件以同步监听逻辑：

let select = document.getElementById("select");
select.addEventListener("change", changeSelection);

function changeSelection() {
  console.log("选中状态变更");
}

// 选中value为"3"的选项
select.value = "3";
// 手动触发change事件
select.dispatchEvent(new Event('change'));

方案2：通过selectedIndex设置选中项（适合已获取到目标<option>元素的场景）

先获取目标<option>在<select>选项列表中的索引，再设置<select>的selectedIndex属性，最后触发change事件：

let select = document.getElementById("select");
select.addEventListener("change", changeSelection);

function changeSelection() {
  console.log("选中状态变更");
}

let option = select.querySelector(`option[value="3"]`);
// 获取目标选项的索引
let optionIndex = Array.from(select.options).indexOf(option);
// 设置选中
select.selectedIndex = optionIndex;
// 手动触发change事件
select.dispatchEvent(new Event('change'));

说明 #

• 设置<select>的value或selectedIndex只会变更选中状态，不会自动触发change事件，因此需要手动调用dispatchEvent来触发事件，确保监听函数能正常执行。
• 这两种方法在所有主流浏览器中都能正常工作，兼容性优于直接调用<option>的click()方法。

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