如何使用VB.NET配合CefSharp修改网页下拉框值实现仅显示1级宝可梦

根本原因 #

直接修改selectedIndex仅会改变下拉框的展示选中值，不会触发该元素绑定的change事件，而页面的筛选逻辑完全依赖该事件触发执行，因此列表不会刷新。

修复后的调用代码 #

在原有修改选中值的逻辑后增加手动触发事件的代码即可：

_browser.EvaluateScriptAsync("(function() {
  const targetSelect = document.getElementsByClassName('form-control col-3 col-sm-2')[1];
  targetSelect.selectedIndex = 1;
  // 手动触发change事件触发筛选
  const changeEvt = new Event('change', { bubbles: true });
  targetSelect.dispatchEvent(changeEvt);
  // 适配使用前端框架开发的页面，可选添加
  targetSelect.dispatchEvent(new Event('input', { bubbles: true }));
})();")

bubbles: true参数用于确保事件可以冒泡到上层的事件监听器，适配使用事件委托实现的前端逻辑。

效果说明 #

执行代码后即可触发页面自动筛选，得到仅展示1级宝可梦的结果：

• 未触发筛选的当前状态：
• 最终预期效果：

内容的提问来源于stack exchange，提问作者Emin Yalçın