使用JavaScript通过CSS选择器选中下拉菜单中的APPLE选项

核心问题 #

你定位的input元素只是Angular自定义下拉组件（从ng-touched类判断是Angular表单控件）的视觉输入框，并非控制选中状态的核心元素：

• 直接修改input.value只会改变输入框的表面文本，不会触发下拉组件的选中逻辑，也不会同步到内部选项的选中状态。
• Angular的表单控件（如MatSelect、自定义下拉）依赖自身的状态管理（FormControl），直接操作DOM无法触发组件的变更检测和状态同步。

修改方案 #

方案1：针对原生<select>封装的下拉 #

如果你的下拉是基于原生<select>增强的，直接定位到<select>元素并设置值，同时触发变更事件：

// 定位到真正的select元素（替换成你实际的选择器）
const selectElement = document.querySelector(".ng-touched select");
if (selectElement) {
  // 设置对应选项的value属性值（注意：不是文本，要和<option>的value属性匹配）
  selectElement.value = "APPLE"; 
  // 触发change事件，让Angular表单检测到状态变更
  selectElement.dispatchEvent(new Event('change', { bubbles: true }));
}

方案2：针对Angular自定义下拉（如Angular Material MatSelect） #

这类组件的选中状态绑定到FormControl，优先通过组件实例操作：

// 定位到下拉组件的宿主元素（带ng-touched的容器）
const dropdownHost = document.querySelector(".ng-touched");
if (dropdownHost) {
  // 获取Angular组件实例（需要Angular调试API支持）
  const dropdownComponent = ng.getComponent(dropdownHost);
  if (dropdownComponent && dropdownComponent.control) {
    // 通过FormControl设置选中值
    dropdownComponent.control.setValue("APPLE");
    // 触发变更检测（如果需要）
    ng.applyChanges(dropdownHost);
  }
}

如果无法获取组件实例，可模拟用户点击操作选项：

// 触发下拉展开（以MatSelect为例，替换成你实际的触发元素选择器）
const trigger = document.querySelector(".ng-touched .mat-select-trigger");
if (trigger) {
  trigger.click();
  // 定位到文本为APPLE的选项，或直接取第2个选项
  const targetOption = document.querySelector(".mat-option:contains('APPLE')") || document.querySelectorAll(".mat-option")[1];
  if (targetOption) {
    targetOption.click();
  }
}

关键注意事项 #

• 确认目标<option>的value属性：如果选项的value不是"APPLE"（比如是ID），需要设置对应的value值而非文本。
• 简化选择器：你原始的选择器过于冗长，建议直接定位到带ng-touched的表单控件宿主，再查找内部元素，避免层级变化导致选择器失效。

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