如何用JavaScript填充指定下拉文本框并延迟点击高亮选项？

下面是整合后的JavaScript代码，实现填充文本、延迟后点击高亮选项的流程：

// 定位目标输入框
const inputElement = document.querySelector('.ng-select-opened > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > input:nth-child(1)');

if (inputElement) {
    // 向输入框填充文本
    inputElement.value = 'arterial line';
    // 触发输入事件（适配依赖数据绑定的框架，确保内容变化被识别）
    inputElement.dispatchEvent(new Event('input'));

    // 延迟1000ms后点击高亮选项
    setTimeout(() => {
        const highlightedOption = document.querySelector('[class="ng-option ng-option-marked"]');
        if (highlightedOption) {
            highlightedOption.click();
        } else {
            console.error('未找到高亮的选项元素');
        }
    }, 1000);
} else {
    console.error('未找到目标输入框');
}

关键细节说明 #

• 增加元素存在性判断，避免因DOM元素未加载完成导致的报错
• 触发input事件，适配Angular这类依赖数据绑定的框架，确保输入内容能被组件识别
• 用setTimeout实现1000ms的延迟等待，保证下拉选项有足够时间加载并高亮

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