程序化操作级联select标签无法触发更新/填充问题求解

框架判定方法 #

你可以通过以下几个特征快速确认网站是否使用AngularJS：

• 打开浏览器开发者控制台，输入angular执行，如果返回的是函数对象而非undefined，即可确认页面使用AngularJS 1.x版本
• 检查DOM元素，若页面根节点存在ng-app属性，或你操作的select标签带有ng-model、ng-options这类前缀为ng-的属性，也可以判定使用了AngularJS
• 你代码中出现的mat-dialog-container是Angular Material组件库的标识，如果控制台输入ng执行后返回对象，也有可能是Angular 2+版本，注意和AngularJS 1.x区分处理

问题原因 #

直接修改DOM的value属性或者模拟普通点击不生效，是因为这类MVVM框架的数据流是事件触发→更新数据模型→同步关联视图，你直接操作DOM没有触发框架监听的原生事件，框架层的关联数据没有更新，自然不会触发下一级的级联选项更新。

解决方案 #

通用方案（兼容所有前端框架） #

修改select的value后，手动触发框架监听的change、input事件即可触发级联更新，代码如下：

var elem = document.evaluate("/html/body/div[2]/div[2]/div/mat-dialog-container/mq-add-vehicle-dialog/div[2]/select", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
// 给select赋值
elem.value = "07";
// 触发change事件
const changeEvent = new Event('change', { bubbles: true });
elem.dispatchEvent(changeEvent);
// 如果change事件没生效，补充触发input事件
const inputEvent = new Event('input', { bubbles: true });
elem.dispatchEvent(inputEvent);

AngularJS 1.x专属方案 #

如果确认是AngularJS 1.x版本，可以直接操作绑定的scope模型：

var elem = document.evaluate("/html/body/div[2]/div[2]/div/mat-dialog-container/mq-add-vehicle-dialog/div[2]/select", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
// 获取元素对应的scope
const scope = angular.element(elem).scope();
// 把selectedModel替换成你select标签ng-model属性对应的字段名
scope.selectedModel = "07";
// 触发脏检查同步更新所有关联视图
scope.$apply();

Angular 2+专属方案 #

如果是带Angular Material的Angular 2+版本，可直接操作组件实例：

var elem = document.evaluate("/html/body/div[2]/div[2]/div/mat-dialog-container/mq-add-vehicle-dialog/div[2]/select", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
// 获取组件实例
const component = ng.getComponent(elem);
// 替换成组件实际绑定的选中值字段
component.selectedValue = "07";

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